1. 问题描述 先说下问题,项目后端是微型Python框架flask,前端是vue-element, 本地开发我配置的是proxy代理,代码如下:
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
before: require('./mock/mock-server.js'),
proxy: {
'/dev-api/api/': {
target: `http://192.168.1.171:5100`,
changeOrigin: true,
pathRewrite: {
'/dev-api/api/': '/api/'
}
}
}
},
下面post请求接口: ![在这里插入图片描述](https://img-blog.csdnimg.cn/bcb477ddeafe478f945c71fca66eccbb.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAVGFrZV50aGF0,size_20,color_FFFFFF,t_70,g_se,x_16) 用Postman直接请求是没问题的,如下图: ![在这里插入图片描述](https://img-blog.csdnimg.cn/b73c82d68e5342dbaedc4e745dbe15e9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAVGFrZV50aGF0,size_20,color_FFFFFF,t_70,g_se,x_16) 控制台打印的日志: ![在这里插入图片描述](https://img-blog.csdnimg.cn/caf281fd96a04db58be733f080442c64.png) 但是不知道为啥页面上请求超时,报错400:
![在这里插入图片描述](https://img-blog.csdnimg.cn/53f598911c774b7fa93a5ad35599c75d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAVGFrZV50aGF0,size_20,color_FFFFFF,t_70,g_se,x_16) ![在这里插入图片描述](https://img-blog.csdnimg.cn/7c9ef71703e64261b83e6cac994e534e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAVGFrZV50aGF0,size_20,color_FFFFFF,t_70,g_se,x_16) 后台无法接收到json格式参数,如下图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/cd4de1d62abe4180b3d5b80a90e5a372.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAVGFrZV50aGF0,size_20,color_FFFFFF,t_70,g_se,x_16) 报错信息:
Proxy error: Could not proxy request /api// from localhost:9525 to http://... (ECONNRESET)
2. 解决办法:
修改vue.config.js文件,改动代码如下:
devServer: {
host: 'localhost',
port: port,
overlay: {
warnings: false,
errors: true
},
before: require('./mock/mock-server.js'),
proxy: {
'/dev-api/api': {
target: `http://192.168.1.171:5100`,
changeOrigin: true,
onProxyReq:function (proxyReq, req, res, options) {
if (req.body) {
let bodyData = JSON.stringify(req.body);
proxyReq.setHeader('Content-Type','application/json');
proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
proxyReq.write(bodyData);
}
},
pathRewrite: {
'^/dev-api/api': '/api'
}
}
}
},
再次请求,成功~~ ![在这里插入图片描述](https://img-blog.csdnimg.cn/16a0d737f0a74ec5bc5af616c23a821c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAVGFrZV50aGF0,size_20,color_FFFFFF,t_70,g_se,x_16)
参考博客:nodejs中http-proxy使用小结
|