The definition and modification requirements of headers in vue-resource under vue. js

Difference between common and custom

Vue-resource is the vue plug-in that I use to interact with interfaces. vue-resource provides the following headers:

Vue. http. headers. common ['token']
Vue. http. headers. custom ['token']

What are their differences? Let's take a look at the following source code (vue-resource/src/http/header. js)

Request. headers = _. extend ({}, _. http. headers. common,
! Request. crossOrigin? _. Http. headers. custom :{},
_. Http. headers [request. method. toLowerCase ()],
Request. headers
);
Before sending a request, the common array is added to headers, while the headm is added to headers only when the access address is not an exotic address.

Personal modification requirements

Because I am working on an APP project, all the interfaces on the mobile phone are exotic, so if I put all the header information to be passed in custom, it is actually virtual, therefore, it can only be placed in common. However, when I need to access interfaces such as Baidu Map api, QQ api, and weibo api, the common will still be passed over, causing an exotic error, this is because there is forbidden header information.

So I made some modifications through Vue. http. options. root sets the public path of the APP-specific interface, and then only needs to use the relative path when using the http method. In this case, you can determine whether to use http: or https: to identify whether it is a real exotic, the following code is directly used:

Request. headers = _. extend (
{},
Request. url. match (/^ (https? :)? \//)? []: _. Http. headers. common,
! Request. crossOrigin? _. Http. headers. custom :{},
_. Http. headers [request. method. toLowerCase ()],
Request. headers
);

I changed vue-resource fork.