Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.