vue-cli3设置代理无效

闲着无聊使用vue-cli3.0搭建了项目,在配置代理后运行的时候出现了如下情况:

但是这个接口直接拿地址拼接是能取数据的,如下(不好意思部分数据必须要隐藏哈):

以下是我的vue.config.js,代理配置:

错误原因

pathRewrite中'^/api':’api‘i问题   // 冒号后面的api意思是用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替,改为如下:

运行项目 npm run serve,

问题解决

vue cli3 代理跨域 404(失败)问题

情景

在写vue cli 中的代理时,百度了好久也没代理上,最终的问题出在路径重写上。如果有跟我有一样问题的小伙伴,欢迎前来参考,可根据各自情况和实际问题进行调试。

接口地址

代理地址为(开发环境)

// .env.development 文件中

VUE_APP_BASE_API 在不同环境( .env.production文件, .env.staging等文件中)为不同地址。

如没有此处,代理地址写死的话,下面的proxy中也要将对应代理地址改掉。

如:part2中。

注意:百度上搜的重新路径都是  ‘’  (空路径),一直代理不过去。找了半天发现需要代理到  '/' 根路径)。卡了好久,距离就差了这一点点问题(啊 啊啊啊 啊啊)。

 *此处需要根据自己的接口状况来调试代理路径地址

浏览器中接口requestURL显示

response中已返回数据

(part2)不需动态改变proxy需代理的路径(即:下图 'api' 位置处)

//vue.config.js 文件中

将地址中       '/api'    代理到      '/'       中.

输出为:

http://127.0.0.1:8080/userInfo/getUserInfoList.do

总结