去除baseURL

proxy: {
      //匹配/dev-api开头的请求
      [process.env.VUE_APP_BASE_API]: {
        //目标服务器,代理访问到https://localhost:8080
        target: process.env.VUE_APP_SERVICE_URL,
        // 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,
        // 并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
        changOrigin: true, //开启代理
        pathRewrite: {
          // 会将 /dev-api 替换为 '',也就是 /dev-api 会移除,
          // 如 /dev-api/db.json 代理到 https://localhost:8080/db.json
          // '^/dev-api':"",
          ['^' + process.env.VUE_APP_BASE_API]: '',
        },
      },
      //匹配/list-api开头的请求
      [process.env.VUE_APP_LIST_API]: {
        //目标服务器,代理访问到https://localhost:8080
        target: process.env.VUE_APP_LIST_URL,
        // 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,
        // 并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
        changOrigin: true, //开启代理
        pathRewrite: {
          // 会将 /list-api 替换为 '',也就是 /list-api 会移除,
          // 如 /list-api/db.json 代理到 https://localhost:8080/db.json
          // '^/list-api':"",
          ['^' + process.env.VUE_APP_LIST_API]: '',
        },
      },
    },

vue.config.js 改写

# base api
VUE_APP_BASE_API = '/dev-api'
VUE_APP_LIST_API = '/list-api'


VUE_APP_SERVICE_URL = 'http://39.98.123.211:8170'
VUE_APP_LIST_URL = 'http://39.98.123.211:8510'

.env

export function test1(data) {
  return request({
    url: 'dev-api/test1',
    method: 'post',
    data,
  });
}
export function test2(data) {
  return request({
    url: 'list-api/test2',
    method: 'post',
    data,
  });
}

api

原文 :Vue-cli 3.0 中如何配置axios跨域多个代理? - 掘金 (juejin.cn)

Vue-cli 3.0 中如何配置axios跨域多个代理?

1、vue.config.js

  devServer: {
    open: true,
    port: 8081,
    proxy: {
            //匹配/dev-api开头的请求
            [process.env.VUE_APP_BASE_API]: {
                //目标服务器,代理访问到https://localhost:8080
                target: process.env.VUE_APP_SERVICE_URL,
                // 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,
                // 并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
                changOrigin: true, //开启代理
                pathRewrite: {
                    // 会将 /dev-api 替换为 '',也就是 /dev-api 会移除,
                    // 如 /dev-api/db.json 代理到 https://localhost:8080/db.json
                    // '^/dev-api':"",
                    ["^" + process.env.VUE_APP_BASE_API]: ""
                }
            },
            //匹配/list-api开头的请求
            [process.env.VUE_APP_LIST_API]: {
                //目标服务器,代理访问到https://localhost:8080
                target: process.env.VUE_APP_LIST_URL,
                // 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,
                // 并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
                changOrigin: true, //开启代理
                pathRewrite: {
                    // 会将 /list-api 替换为 '',也就是 /list-api 会移除,
                    // 如 /list-api/db.json 代理到 https://localhost:8080/db.json
                    // '^/list-api':"",
                    ["^" + process.env.VUE_APP_LIST_API]: ""
                }
            },
        }
  },
复制代码

2、.env

# 使用 VUE_APP_ 开头的变量会被 webpack 自动加载
# 定义请求的基础URL, 方便跨域请求时使用

VUE_APP_BASE_API = '/dev-api'
VUE_APP_LIST_API = '/list-api'

# 接口服务地址, 以你自已的为主
# 可更改为你自已配置的 Easy-Mock 接口服务地址
# http://120.53.31.103:84/api

VUE_APP_SERVICE_URL = 'http://120.53.31.103:84/api/'
VUE_APP_LIST_URL = 'http://120.27.63.9:8080/'
复制代码

3、api

export function test1(data) {
  return request({
    url: 'dev-api/test1',
    method: 'post',
    data,
  });
}
export function test2(data) {
  return request({
    url: 'list-api/test2',
    method: 'post',
    data,
  });
}


 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐