How to access data across domains using Axios in Vue

Recently in the project need to use Axios, so it is bad to fill in the Axios what the hell. The more it is Vue-resource alternative, the official website also said, after all with Axios,

Vue-resource is not being maintained. So how to use this Axios, Internet search a lot of, basically is the same, I do not know whether the authors have been tested in the local. At least I do not follow the online approach, always can not succeed. After a few days of struggle, I finally made it clear, in order not to let other small friends detours, I put in the actual operation of the examples I share to everyone, hope that useful to everyone.

First, install the Axios

The usual, to use Axios, we have to install it, installation method:npm Install Axios

second, the client uses the way

First look at the answer on the Internet, I have already identified on the map, this practice is wrong.

The right approach is Remove Post，：

third, server-side settings

Although the client is set up across domains, but you still cannot access the interface data, you must set the Header property on the server side:

Iv. Axios Method Encapsulation

In general, we will use the method is: Get,post,put,patch, encapsulation method is as follows:

Five, the use of the method after encapsulation

1, in the Main.js file to refer to the previously written files, my name is Http.js

2. Call between places where it is needed:

Description

The Get call method is as follows, where the URL is the interface address

The. $get (URL). Then (res) {

Code

});

The post invocation method is as follows, where the URL is the interface address, and data is the request.

this. $post (Url,data) and then ({

Code

});

The patch invocation method is as follows, where the URL is the interface address and data is the requested

this. $patch (Url,data) and then ({

Code

});

The put call method is as follows, where the URL is the interface address and data is the requested

this. $put (Url,data) and then ({

Code

});

Read the above content, is not very simple, in fact, there is nothing, but this is the problem card for a long time, look at the online answer, really is vulnerable. Problem solved, heart really excited ah O (∩_∩) o ha!

How to access data across domains using Axios in Vue