vue 多项目接入跨域问题

vue.config.js 文件

module.exports = {
  devServer: {
    port: 9095, //  项目启动的端口号
    open: true, // 配置项目在启动时自动在浏览器打开
    proxy: {
    	// 跨域的第一个项目
      '/yh': { // '/api'是代理标识,一般是每个接口前的相同部分
        target: "http://192.168.5.58:8002", // 请求地址,一般是服务器地址
        changeOrigin: true, // 是否进行跨域
        // pathRewrite: { // pathRewrite的作用是把请求接口中的 '/api'替换掉,一般是替换为空""
        //     '^/api':""
        // }
      },
      // 跨域的第二个项目
      '/yf': {
        target: "http://192.168.1.140:9001",
        changeOrigin: true,
        pathRewrite: {
          '^/yf': ""
        }
      },
      // 跨域的第三个项目
      '/yz': {
        target: "http://192.168.5.253:8031",
        changeOrigin: true,
        pathRewrite: {
          '^/yz': ""
        }
      }
    },
  }
};


跨域的第一个项目A:
接口:http://192.168.5.58:8002/yh/auth/login
跨域的第二个项目B:
接口:http://192.168.5.52:8021/api/v1.0/users/login
跨域的第三个项目C:
接口:http://192.168.5.253:8031/api/v1.0/users/login

我的项目还处理了一个问题:
就是配置proxy项目B 与项目C的时候,都是匹配/api,
需要做下区分:项目B添加/fy, pathWrite 为空; 项目C添加/fz, pathWrite 为空;
登录页请求的地址路径是:

//项目B
 axios({
            method: "post",
            url: "/yf/api/v1.0/users/login",
            data: yifuData,
          })

// 项目C

 axios({
            method: "post",
            url: "/yz/api/v1.0/users/login",
            data: yizhenData,
          })

你可能感兴趣的:(vue.js,javascript,ecmascript)