How to solve the Agent and Cross-domain problems in vue

This article focuses on "how to solve agent and cross-domain problems in vue". Interested friends may wish to have 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 agent and cross-domain problems in vue.

Install the vue-resource plug-in

Cnpm install vue-resource-save

Check the version of the plug-in in package.json in the root directory

Import files under rourer-index.js

Import Resource from 'vue-resource'Vue.use (Resource)

After introducing vue-resource, you can use http based on global Vue objects, or you can use http reference links based on a Vue instance

Install the axios plug-in

Cnpm install-save axios

Introduced in the background service file (server.js)

Var axios = require ('axios')

Create a new public Js file to store httpserver

Import axios from 'axios' / / introduces the axios plug-in export function getHttp (url, callFun) {/ / get request method axios.get (url) .then (callFun) .catch (function (err) {console.log (err)})}

III. Proxy agent

Find the proxyTable setting agent under the config-index.js file

For example, my vue project link is localhost:8080 background data address is localhost:8081/api/seller (port is not the same)

ProxyTable: {'/ api': {target: 'http://localhost:8081', changeOrigin: true, pathRewrite: {' ^ / api':'/ api' / / pathRewrite method overrides url, so that the configured url overrides url with the method http://localhost:8081/api/seller / /'^ / api':'/'/ / pathRewrite The configured url is http://localhost:8081/seller}.

4. Data call

Write the following code in the vue page where you want to call the data

Js part

Import {getHttp} from'.. / static/js/httpserver.js'export default {data () {return {seller: {}, methods: {shangjia: function () {let url ='/ api/seller' getHttp (url, function (res) {res = res.data console.log (res)})}

Html part

Merchants here, I believe that you have a deeper understanding of "how to solve agent and cross-domain problems in vue". 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!