Vue项目非proxy实现访问不同微服务

Updated on in 编程技术 with 0 views and 0 comments

背景

最近做的一个项目,由于甲方的奇葩要求:

前端 Vue 项目打包部署不能用 nginx 代理,需要走甲方提供的 SLB,在请求不同的微服务时,需要带上 SLB 指定的微服务端口,由甲方配置 SLB 匹配不同端口,负载到相应微服务。

在之前项目开发中,我们都是通过 nginx 去匹配不同的 location 去做,或者是后端直接使用的 Spring cloud gateway,前端只需要配置 http-proxy-middleware 或者直接请求 Spring cloud gateway 网关就行。

而这次甲方的需求,后端不能用 Spring cloud gateway,必须前端请求微服务前就告诉 SLB 需要请求哪个微服务,故而有了今天的这个实现方式,可能不是最优,但是解决了目前的燃眉之急。

思路

在调用后端接口前,类似于 nginx,根据不同的 location 匹配设置不同的端口,动态拼接到 URL 上,再去请求后端,参考了 axios 用 helper 下边的 combineURLs.js

1module.exports = function combineURLs(baseURL, relativeURL) {
2  return relativeURL
3    ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
4    : baseURL;
5};

实现

自己写一个类似的公共方法,每次请求之前,先拼接

 1//请求拼接方法
 2    combineURLs(relativeURL) {
 3        let baseURL = axios.defaults.baseURL;
 4        let port;
 5        if (relativeURL.startsWith("/system")) {
 6            port = 8081;
 7        }
 8        if (relativeURL.startsWith("/mdm")) {
 9            port = 8082;
10        }
11        if (relativeURL.startsWith("/integration")) {
12            port = 8083;
13        }
14        if (relativeURL.startsWith("/plan")) {
15            port = 8084;
16        }
17        if (relativeURL.startsWith("/analysis")) {
18            port = 8085;
19        }
20        return relativeURL
21            ? baseURL.replace(/\/+$/, '') + ":" + port + "/" + relativeURL.replace(/^\/+/, '')
22            : baseURL;
23    }

然后在封装的 axios 请求之前,调用方法

 1// 根据环境变量进行接口区分
 2switch (process.env.NODE_ENV) {
 3    case "dev":
 4        axios.defaults.baseURL = 'http://localhost';
 5        break;
 6    case "pro":
 7        axios.defaults.baseURL = 'http://10.16.160.160';//线上环境
 8        break;
 9}
10
11export default {
12    get(url, params = {}) {
13	//重点!!!请求前拼接,jurisdiction.js是自己封装公共方法的地方
14        url = jurisdiction.combineURLs(url)
15        return new Promise((resolve, reject) => {
16            axios.get(url, {
17                params
18            })
19                .then(response => {
20                    if (response) {
21                        resolve(response.data) // 成功
22                    }
23                })
24                .catch(err => {
25                    reject(err) // 失败
26                })
27        })
28    },
29    //post,put,delete类似
30}

这样,在 API 里边,只需要写上不同的请求 URL 即可,如

1export const Apis = {
2    logs: params => req.post("/system/logs/list", params),
3    users: params => req.post("/system/users/list", params),
4    productionLine: params => req.get(`/mdm/productionLine/${params}`)
5}

跨域

这样实现了动态拼接,只需要后端配置上跨域支持就行了

 1@Configuration
 2public class WebMvcConfig implements WebMvcConfigurer {
 3
 4    /**
 5     * 配置跨域信息
 6     * @param registry
 7     */
 8    @Override
 9    public void addCorsMappings(CorsRegistry registry) {
10        registry.addMapping("/**")
11                .allowedOrigins("*")
12                .allowCredentials(true)
13                .allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS")
14                .allowedHeaders("*")
15                .maxAge(3600);
16    }
17}

非前端开发,小小后端程序员,目前只能想到这种方式了。


标题:Vue项目非proxy实现访问不同微服务
作者:kangaroo1122
地址:https://kangaroohy.com/articles/2021/03/20/1616218000989.html
声明:如非特别说明,版权归kangaroo1122 所有,转载请注明出处,谢谢!
签名:After all,tomorrow is another day!