vue——配置代理无效问题

参考：

1.webpack proxy 不生效

https://segmentfault.com/q/1010000020677598

2.vue开发环境配置代理

https://blog.csdn.net/weixin_50576800/article/details/125055213

3.webpack配置proxyTable时pathRewrite无效的解决方法

https://zhuanlan.zhihu.com/p/52480345

4.vue-cli3+ TS 跨域配置之changeOrigin

https://blog.csdn.net/weixin_49875821/article/details/123279804

 

我的情况：vue项目中，webpack.config.dev.js配置代理未生效

原问题代码：

axios.defaults.baseURL = 'xxx'; // 配置请求基础路径

 

解决方法

步骤1.修改请求基础路径

axios.defaults.baseURL = '';
或者
axios.defaults.baseURL = 'localhost:8080'; // 端口可根据实际情况修改

原因：proxy只能代理本地到相应域名，不能代理其他域名到相应域名下

 

步骤2.配置代理

webpack.config.dev,js（此文件配置只针对开发环境）：

module.exports = {
  devServer: {
​    port: 8080, // 启动端口，默认是8080
​    proxy: {
      // 配置多个代理，匹配的前缀一样时，会优先第一个匹配到的，如果前面不符合，才会走后面的代理。所以当匹配的前缀一样，需要把优先级高的放在前面
      '/api/*': { // 匹配以/api开头的请求
        target: 'xxx', // 代理的服务器
        changeOrigin: true, // false-请求头中host仍然是浏览器发送过来的host，true-发送请求头中host会设置成target；注意：在vue-cli3中，changeOrigin默认值是true；在vue-cli2中，默认值是false
        pathRewrite: { '/api': '' }, // 请求路径重写；将 /api/xxxx  --> /xxxx(去掉api)
      },
      '/': {
        target: 'xxxx',
        changeOrigin: true,
      },
    },
  },
};