Cross-origin ajax solution (recommended) during vue-cli development, vue-cliajax

Cross-origin ajax solution (recommended) during vue-cli development, vue-cliajax

Objective: To access the background interface to obtain data for a project built using vue-cli during development, a cross-origin problem occurs.

Configure the following in config/index. js:

[That is, when an ajax request is made, any request address starting with/api in the address is parsed as the target address, and target is the background interface address you want]

proxyTable: { ‘/api': { target: ‘https://188.188.18.8‘, changeOrigin: true, pathRewrite: { ‘^/api': ” } } }“`

Vue-resource call example

This. $ http. get ('/api/v4/user/login', [options]). then (function (response) {// callback for successful response}, function (response) {// callback for Error response });

Axios call example

 axios({  method: 'get',  headers: {'Accept': '*/*'},  url: '/api/v4/user/login',  data: options }) .then(function (response) {  console.log(response.data) }) .catch(function (error) {  console.log(error) })

Principles:

In configuration: target: 'https: // 188.188.18.8'

In the preceding vue-resource example, the first parameter is/api/v4/user/login.

The local server will automatically resolve it to https: // 188.188.18.8/v4/user/login, and this address is officially required.

Cross-origin principle (local files pretend to be on a remote server ):

Open the page in a browser. When a request is initiated: the address of the local server (usually localhost: 8080 or 127.0.0.1: 8080), the request is received, the request address contains a string or api. Then, the local server changes the request address to https: // 188.188.18.8/v4/(configure the address) + user/login (detailed address of the call method ).

At the same time, the address of the local server will change from localhost: 8080 to https: // 188.188.18.8/v4/. The result is:

Our local files are considered to be placed on the target address (https: // 188.188.18.8/v4/) server, and the files on the current server are requested for other things on the server, naturally, it is not cross-origin.

During the above vue-cli development, the ajax cross-origin solution (recommended) is all the content that I have shared with you. I hope to give you a reference, we also hope that you can support the customer's home.