How to solve the Cross-domain problem by vue.js
This article mainly introduces vue.js how to solve cross-domain problems, the article is very detailed, has a certain reference value, interested friends must read it!
Vue.js to solve cross-domain problems: 1, enter the vue project root directory; 2, find the vue.config.js file, use the editor to open; 3, set cross-domain in proxy.
This article operating environment: windows10 system, vue 2.5.2, thinkpad T480 computer.
To achieve cross-domain in vue development, you need to first go to the root directory of the vue project, find the vue.config.js file, and then set the cross-domain in proxy:
Tip: if you can't find the vue.config.js file, you can create one yourself.
DevServer: {proxy: {/ / configure cross-domain'/ api': {target: 'http://121.121.67.254:8185/', / / simulated by the address in the background here You should fill in your real backend interface changOrigin: true, / / allow cross-domain pathRewrite: {/ * rewrite path When we see the requested address in the browser is: http://localhost:8080/api/core/getData/userInfo, the actual access address is: http://121.121.67.254:8185/core/getData/userInfo, because / api * /'^ / api':'}},}}
The principle of using proxy to cross-domain in vue is to send the domain name to the local server (the service that starts the vue project, loclahost:8080), and then the local server requests the real server.
Here are the steps I took to implement cross-domain in developing a vue project:
1. Set the address to be accessed in proxy and rewrite the string whose / api is empty, because the address we really request is without / api, this rewriting is very important!
2. Set baseURL to / api when creating the axios instance, and our cross-domain is completed.
3. Suppose the real address of the request is: http://121.121.67.254:8185/core/getdata/userInfo, but we will see this on the browser: http://localhost:8080/api/core/getData/userInfo, with an extra / api, but it does not affect our request for data.
The above is all the content of the article "how to solve Cross-domain problems in vue.js". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
