Vue cli项目配置代理不生效

解决方案
,
293 words , 1 mins.

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

webpack下配置proxyTable的问题

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:9003/',
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
 ...
  }
 }

导入了axios：

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

请求的代码：

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

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

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

解决方案

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

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

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

最终解决（理解错误）

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

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

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

正确的解决方案

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

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

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

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

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