the answer is definitely not needed. You can refer to the project built by vue-cli to deal with requests for different domain names in different environments . If it is helpful, you can give it to a star
.
first of all, there is nothing wrong with your configuration. Maybe you don't understand the principle. Let's take a look at my following analysis:
for example: the address to be requested in your production environment is www.baidi.com:8080/aa/bb
when you are developing, the configuration of proxyTable should be:
Note: the following aa is not a random name, it must be aa
'/aa': {
target: 'www.baidi.com:8080/aa',
changeOrigin: true,
pathRewrite: {
'^/aa': ''
}
The address requested in the
project should be axios.get ('/ aa/bb'). When parsing, the agent will add "www.baidi.com:8080/aa" before aa to become "www.baidi.com:8080/aa/aa/bb",
but because the pathRewrite in the configuration changes aa (the second aa) to an empty string, the request address becomes "www.baidi.com:8080/aa/bb",
when the project is packaged and launched, the request address in the code does not need to be changed. Let me tell you why,
when the online code is running, it encounters an axios.get ('/ aa/bb') request, because there is a "/" in front of the aa, which means the root directory,
so "/ aa/bb" is resolved to hostname+port+ "aa/bb", so the request address is "www.baidi.com:8080/aa/bb",
there's nothing wrong with it. I don't know if you understand it
.
recently found that many people do not quite understand this area. I will write an article about it in the evening and post the address to you tomorrow
.
what is not needed, proxyTable only acts as an agent in the development environment to solve cross-domain problems in the development environment. If the project is packaged and put online, you need to configure the Nginx at the background to solve the cross-domain problem.