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還是有點區(qū)別，這里的post的data默認不是以form data的形式，而是request payload。解決起來也很簡單：在vue實例中添加headers字段:

http: { headers: {'Content-Type': 'application/x-www-form-urlencoded'} }

后來翻了下vue-resource
的源碼，發(fā)現(xiàn)有更加簡單的做法:

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現(xiàn)象。啟用該選項后，請求會以普通的POST方法發(fā)出，并且HTTP頭信息的X-HTTP-Method-Override屬性會設置為實際的HTTP方法。

如果服務器無法處理PUT，PATCH和DELETE的請求。可以啟用enulateHTTP。
啟用之后，請求會以普通的POST方法發(fā)出，并且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