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
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。