vue-source $http.post问题详解

vue-resource
yon
Paste_Image.png
**报错信息** Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
在mian.js 全局定义
Vue.http.options.emulateHTTP = true;Vue.http.options.emulateJSON = true;

Paste_Image.png
在使用的时候遇到一个小坑,这个$http请求和jquery的ajax还是有点区别，这里的post的data默认不是以form data的形式，而是request payload。解决起来也很简单：在vue实例中添加headers字段:
http: { headers: {'Content-Type': 'application/x-www-form-urlencoded'} }
后来翻了下vue-resource
的源码，发现有更加简单的做法:
Vue.http.options.emulateJSON = true;
这里只简单介绍下，详细的文档请大家移步这里吧。
vue.js目前还有众多的插件，详情看这里。
https://segmentfault.com/a/1190000003968020#articleHeader10
emulateHTTP
emulateHTTP（布尔值）
默认值为:false,当值为true是，用HTTP的POST方式PUT，PATCH，DELETE等请求，并设置请求头字段HTTP_Method_Override为原始请求方法。
如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求，你可以启用enulateHTTP现象。启用该选项后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。
如果服务器无法处理PUT，PATCH和DELETE的请求。可以启用enulateHTTP。
启用之后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实例的HTTP方法
Vue.http.options.emulateHTTP = true;
emulateJSON
emulateJSON(布尔值)
默认值为：false,当值为true并且data为对象时，设置请求头Content-Type的值为application/x-www-form-urlencoded
如果服务器无法处理编码为application/json的请求，可以启用emulateJSON选项。启用之后，请求会以application/x-www-form-urlencoded为MIME type，就像普通的HTML表单一样。
Vue.http.options.emulateJSON = true;
crossOrigin
crossOrigin（布尔值）
默认值为：null，表示是否跨域，如果没有设置该属性，vue-resource内部会判断浏览器当前URL和请求URL是否跨域。
if ( request.crossOrgin === null ) {    request.corssOrigin = corssOrigin(request);}if ( request.corssOrigin ) {    if ( !xhrCors ) {        request.client = xdrClient;    }    request.enumlateHTTP = false;}
如果最终crossOrigin为true并且浏览器不支持CORS，即不支持XMLHttpRequest2时，则会使用XDomainRequest来请求。目前XDomainRequest 只有IE8，IE9 浏览器支持用来进行AJAX跨域。


作者：榴莲哥
链接：http://www.jianshu.com/p/8d66070eac20
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。