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

In this article, the editor introduces in detail "how to solve vue.js cross-domain problems". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to solve vue.js cross-domain problems" can help you solve your doubts.

1. What is cross-domain?

For the problem, we need to know what is cross-domain in order to facilitate our understanding. For cross-domain, it is simply due to the same origin policy of the browser. Generally speaking, any of the protocols, domain names and ports of the request URL that are different from our current page address are called cross-domain. For example, different network protocols, different ports, different domain names, different sub-domain names, domain names and domain names corresponding to ip are all called cross-domain.

two。 How to solve the cross-domain problem?

(1), proxy agent

We can add code to the config or index.js in the project as follows:

ProxyTable: {'/ api': {target: 'http://localhost:8083/',// set the domain name and port number of the interface you call, don't forget to add http changeOrigin: true, / / here true means to implement cross-domain pathRewrite: {' ^ / api':'/'//, it is understood to use'/ api' instead of the address in target. When we drop the interface in the later components, we directly use api instead. For example, if I want to call 'http://40.00.100.100:3002/user/add'', just write'/ api/user/add''}}.

After sending access through axios, import the installed axios in main.js and mount it to the prototype, as follows:

Import Axios from 'axios' / / Import axios// to mount axios to prototype Vue.prototype.$axios = Axios

Finally, we implement the data request through this.$axios.get (). Then (), the code is as follows:

/ send get request show () {/ / use / api to proxy 'http://localhost:8083' this.$axios .get ("/ api/selectall") .then (res = > {this.list = res.data.result; / /}}) .catch (e = > {console.log (e);}) }, / / send post request add () {this.$axios ({method: "post", url: "/ api/saveinfo", params: {name: this.name / / passed parameter}}) .then (res = > {this.show ();}) }, after reading this, the article "how to solve vue.js Cross-domain problems" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to learn more about related articles, please 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.