Vue-cli项目配置代理不生效

详解webpack的proxyTable无效的解决方案

webpack下配置proxyTable的问题

Vue-cli@2创建的项目，用的webpack，配置了 config/index.js ：

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:9003/',
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
 ...
  }
 }

导入了axios：

import axios from 'axios'
Vue.prototype.axios = axios

请求的代码：

login() {
    if (this.form.userId === '' || this.form.password === '') {
        this.openMessageWarning('用户名和密码不能为空')
        return
    }
    this.axios.post('/test/param1').then((res) => {
        console.log("res: ", res)
    })
}

改完之后重启了项目，但是控制台显示请求的ip还是本地：

POST http://localhost:8080/test/param1 404 (Not Found)

解决方案

查了一下午的资料，基本上都差不多：

• 检查proxyTable中配置的域名
• 配置 webpack.baseUrl
• 配置完要重启应用才能生效
• 删掉node_modules重建项目

前几个方法都试了，没什么效果。甚至和以前的项目对比了，都没找到什么不同的地方。

最终解决（理解错误）

看了 详解webpack的proxyTable无效的解决方案 ，说可能是缓存的问题，我每次都有清理浏览器的缓存，不知道webpack还有缓存的，然后我尝试着将proxyTable中的端口换了一下，结果…就请求成功了！

POST http://localhost:9004/test/param1 404 (Not Found)

没想到这层原因，在这个问题上卡了一下午，心态崩溃。

正确的解决方案

其实是配置中target配置有问题：

例如后台地址：http://baidu.com/api/user/{userId}

本地项目地址为：http://localhost:8080

//方式一，留空，不写
'/^api': '', //代表你在axios里的请求'/api/info' = http://localhost:54321/info

//方式二，重写
'/^api': 'api/', //代表你在axios里的请求'/api/info' = http://localhost:54321/api/info