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

Vue.js2.0+Element UI uses axios for network communication and how to solve the cross-domain problem. In view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Install axios

Change to the current working directory in the command console and type npm i axios-s-dev to install

Configure axios

Open the main.js file and add import axios from 'axios' to it

Then add Vue.prototype.$http = axios

Call API

We add a button to the HelloWorld.vue of the project and add a click event to it.

Button

Then add the get event to the methods

Then save the startup project and click the button

Baidu found that axios components need to achieve cross-domain access, many solutions are to let the server to change this piece, and finally found a solution after a long search.

Cross-domain access with axios

Find proxyTable in the config/index.js file and add it.

Note:

Where'/ api' is the match and target is the requested address

Because the prefix'/ api', is added to the url of ajax, and the original interface does not have this prefix

So you need to rewrite the address through pathRewrite and change the prefix'/ api''to'/'.

If the interface address itself has the universal prefix'/ api'', you can delete the pathRewrite.

And then back to our HelloWorld.vue.

The original URL wrote the full path, but now because we have configured the address of the target in the config/index.js, we can directly change the following path here.

Compared with the actual address in the figure above, there is no api/, which is routed in the index.js.

PathRewrite: {

'^ / api':' /'

}

It worked.

After rerunning the program, click the button and return the result.

This is the answer to the question about Vue.js2.0+Element UI using axios for network communication and how to solve cross-domain problems. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

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.