vue-resource解决Provisional headers are shown问题

一、前情提要

用 vue-resource post请求数据时一直报跨域错误：has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
由于项目紧急所以改换 axios 请求，没有报任何错误，并且成功返回结果 。

二、原因分析

vue-resource 报错，axios 不报错，http 请求的底层都是一样的，两者不同之处就是配置，那到底哪个配置影响的呢？

打开network，正确的请求配置（图一）：

报错的请求配置（图二）：

对比上面两图中的请求配置

1. 注意到图二的1位置，请求参数的方式不对

于是各种搜索得到的结果大部分都是说设置：emulateJSON : true,但是并没有任何作用；
也有说设置header，但是没搞清楚header到底怎么设置。

2. 这时候注意到图二的2位置，发现有一个提醒

搜索到 https://www.jianshu.com/p/424aa9d0f3c5 这篇文章后终于有灵感。

3.设置 header

main.js 中设置：

Vue.http.headers['Content-Type'] = 'application/x-www-form-urlencoded';

发现还是不起作用，于是打印了 Vue.http.headers

图中显示每个请求方法(eg: post)都有单独的 Content-Type 配置，对比上图就明白该怎么配置 header 了。

三、解决方法

设置 POST 请求头的类型

Vue.http.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 

此时重新请求，终于成功了。

我的个人博客有空来坐坐

https://www.wangyanan.online