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

This article mainly introduces "how vue solves the cross-domain problem of axios request front-end". In daily operation, I believe many people have doubts about how to solve the cross-domain problem of axios request front-end in vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt of "vue how to solve the cross-domain problem of axios request front-end". Next, please follow the editor to study!

First, why is there a cross-domain problem?

Cross-domain: when a browser requests the resources of another domain name from the web page of one domain name, the domain name, port and protocol are cross-domain.

In the mode of separation of the front and back ends, the domain names of the front and back ends are inconsistent, and the problem of cross-domain access occurs. The cross-domain problem stems from the same origin policy of JavaScript, that is, only the protocol + hostname + port number (if any) are the same, then they are allowed to access each other. In other words, JavaScript can only access and operate resources under its own domain, but cannot access and manipulate resources under other domains. Cross-domain problems are for JS and ajax. While axios is a kind of encapsulation of ajax technology through Promise, it also has cross-domain problems.

II. Solutions

Here I will use this machine to open two different ports to test.

Error reports before cross-domain are not processed

There is no cross-domain processing request is like this.

Axios.get ('http://localhost:8080/getData'). Then (res = > {console.log (res)}) .catch (err = > {console.error (err);}) Cross-domain resource sharing (CORS)

The front end carries out reverse proxy to solve the cross-domain problem. The schematic diagram is as follows:

1. The port of vue project is 8081.

2. If your computer opens a port of 8080, the request / getData will put the json data back.

3. Configure the agent

1. In vue2.0

Modify the index.js file under the config folder and add the following code to proxyTable:

ProxyTable: {'/ apis': {target: 'http://localhost:8080/', / / to solve the domain name secure:false of the cross-domain interface, / / if it is a https interface, you need to configure this parameter changeOrigin: true, / / if the interface is cross-domain This parameter needs to be configured pathRewrite: {'^ / apis':''/ / path rewriting}},}

Then write this in the axios in the request

Axios.get ('apis/getData') .then (res = > {console.log (res)}) .catch (err = > {console.error (err);})

Analysis:

What follows the target is the public part of the URL that needs to be requested, then use / apis to proxy this, and finally rewrite some paths, using the apis of our proxy as the prefix for the request.

We can customize this prefix. ProxyTable is an object, so we can configure multiple proxies.

Cross-domain solution

two。 In vue3.0

After the vue-cli3 scaffolding is built, there is no vue.config.js file in the project directory, so you need to create it manually.

Creating a new vue.config.js and configuring the following information can also be solved.

Module.exports = {devServer: {proxy: {'^ / api': {target: 'http://localhost:8080/',// interface prefix ws:true,// proxy websocked changeOrigin:true / / Virtual site needs more origin pathRewrite: {'^ / api':''// rewriting path}

Summary:

ChangeOrigin: true: open the proxy: create a fake server locally, then send the requested data and receive the requested data at the same time, so that the server and the server can interact with each other.

Apis is the prefix of the actual request of the interface, which proxies the public part of our actual interface prefix, that is, protocol + hostname + port number.

For example, if the request API is localhost:8080/getData, we only need to pass in: getData

Then the public domain name is localhost:8080/,. We are just requesting that the public domain name localhost:8080/ of the interface be changed to api/.

When you run the project, you can see that the path of the API request is: localhost:8081/apis/getData

After entering the agent, the actual request path is: localhost:8080/getData

At this point, the study on "how to solve the cross-domain problem of axios request front-end by vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.