Why my Front-End requests are all sended to Back-End project? - vue.js

Question

I'm learning about front-end and back-end interfaces docking. But I met a problem.
My back-end project's port is 8081 and when I send this request http://localhost:8081/hello, I will receive a reponse bodyhello
And my front-end project's port is 8080. When I send request likes http://localhost:8080/hello, the response of it is the same as http://localhost:8081/hello
Here's my vue.config.js
let proxyObj = {};
proxyObj['/']={
ws: false,
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: {
'^/': ''
}
}
module.exports= {
devServer: {
host: 'localhost',
port: 8080,
proxy: proxyObj
}
}
If I change proxy: proxyObj to proxy: null then go http://localhost:8080/hello, I receive nothing but a blank. Is anything wrong with my vue.config.js file?
Any help will be appreciated!

Answer 1

DevServer proxy will proxy requests depend on your proxy config:
// '/'means this rule will match all requests
proxyObj['/']={
ws: false,
// target means requests that matched will be sent to http://localhost:8081
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: {
'^/': ''
}
}
With this config, all your requests will be sent to the backend server, you will receive a response from the server. If you set your config object to null, your requests will be sent to your frontend project: http://localhost:8080, so you can't receive any response.
See here for more detail about proxy config.