Vue.js2.0+Element UI uses axios for network communication and how to solve cross-domain problems
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.
