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

This article mainly explains how vue solves the cross-domain problem in front-end of axios request. Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to solve the front-end cross-domain problem of axios requests by vue".

There are many solutions to cross-domain problems in normal development. The most common is the backend to modify the response header. But the front end can also be solved through reverse proxies. To prevent such an error from happening next time, record it and summarize it.

So now let's review it and solve it.

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);})

Reverse proxy

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

The port of the vue project is 8081

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

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 to be more responsible for origin pathRewrite: {'^ / api':''// rewriting path} here I believe you have a deeper understanding of "how vue solves the front-end cross-domain problem of axios requests", so you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.