yon Paste_Image.pngvue-resource
**报错信息**
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跨域。
https://segmentfault.com/a/1190000007087934
网友评论