美文网首页
vue-resource 请求报错 emulateJSON em

vue-resource 请求报错 emulateJSON em

作者: sponing | 来源:发表于2016-12-08 15:45 被阅读0次

    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跨域。
    https://segmentfault.com/a/1190000007087934

    相关文章

      网友评论

          本文标题:vue-resource 请求报错 emulateJSON em

          本文链接:https://www.haomeiwen.com/subject/mjrsmttx.html