Recording an interesting bug that I encountered while helping others debug it. A buddy has been asking the same question several times in the group. He has configured a proxy and the request has been sent. There is no problem in the postman test and it can be received successfully, but When I made a request on the front end of the project, there was indeed no response at all. At first I thought it was because the content-type data format did not correspond to the back-end, but he said that he had tried many times and all kinds of data types were useless. He wrote the back-end himself. First secondary use. Then I helped him conduct a debugging last night.
Dependencies used
First of all, you can see that the postman test reported an Internal Server Error to me, which is why I don't have his database.
The backend received it, proving that the request was normal.
Then the front-end project made a request, which was indeed pending. What's even more ridiculous is that the front-end did not report an error.
Agent configuration
There is no problem with the axios request.
The key is that the get request can be sent successfully. When I was puzzled, I directly replaced the axios baseURL with the address of the requested service. It actually successfully sent the request and returned a 500 error. That means it ran the proxy and something went wrong.
Then I ran to ask the GPT3.5 teacher. This is the case.
If the proxy is set in the Vue project, the GET request can be proxy normally, but the POST request cannot take effect. It may be because by default, webpack-dev-server only handles GET. Request to be proxied.
But after thinking about it, it seems to work on both get and post. Just asked.
Sure enough, GPT teacher is very good at making jokes.
What can I do next? Baidu, look at the official website, I chose the former.
The answer I got was that all the things I looked at were asking me to change the domain name and localhost to 127.0.0.1, which was of no use. This is still valid. Nodejs official just said that access to the server is prohibited, and did not say the reason.
The guess is that there may be a problem with the data format of the post after proxying.
Then perform a process on the post agent.
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
before: require('./mock/mock-server.js'),
proxy: {
// 配置代理 希望拦截当前的host地址 替换为目标地址
// key: {
} ; key为拦截的规则,可以是正则表达式
// http://localhost:9528/lejuAdmin/index/login
// 发送的请求首先会经过proxy的拦截
'/api': {
// http://leju.bufan.cloud/lejuAdmin/index/login 对发生的请求的域名做一个改写
// target: "http://192.168.219.70:8000", // 8080可以省略不写 所以代理地址和当前项目不是同一个地址!!
target: "http://localhost:8000", // 8080可以省略不写 所以代理地址和当前项目不是同一个地址!!
changeOrigin: true, // 如果是跨域 需要添加
// secure:false, // 如果发生的请求的协议是https secure:false,
onProxyReq: function (proxyReq, req, res, options) {
if (req.body) {
let bodyData = JSON.stringify(req.body);
// incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
proxyReq.setHeader('Content-Type','application/json');
proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
// stream the content
proxyReq.write(bodyData);
}
},
pathRewrite: {
// pathRewrite 可以改写发送的请求路径
// /lejuAdmin/index/login
// /index/login
// '/lejuAdmin' : "/"
// ['/xxx']: '/yyy'
"^/api": ""
},
logLevel: 'debug' // 打印调试信息
}
}
},
The main thing is this function, and then I found that it was successful.
Very good, just 500, the rest is not my responsibility.
I'm a little confused as to why this is the case. I have to check the node official website. I feel like this is just a chance, but it will happen. This bug is also quite interesting.