最近公司提供一個項目驅動學習Web開發的機會，主動承擔了一部分任務，開發了幾個簡單的網頁，學習了Vue.js框架，使用了最簡單的html引入vue.js的開發方式，其中發現了幾個問題。
Vue Resource 添加Headers之后請求自動變為OPTIONS的問題
網絡請求使用了Vue Resource，開始在本地開發的過程中，不管添加Header與否，訪問接口都正常，但是在部署到域名網站下測試之后，發現添加了Header的POST、GET、PATCH請求都會變成OPTIONS請求，但是由于服務端并沒有兼容OPTIONS請求，所以就會返回405錯誤，訪問失敗。
這個問題查找了資料之后發現，這是由于跨域問題導致的（部署網頁的地址和訪問接口的地址不一致），都會先發送OPTIONS請求，無法在我這邊修改，只有服務端兼容OPTIONS。服務端在修改中，還沒有驗證。
在本地打開網頁之所以不存在這個問題，是因為本地并沒有部署，所以不存在跨域的問題，故訪問正常。
Vue.js通過html方式引入在不同瀏覽器上的兼容性問題
在使用data屬性綁定到html控件上時，發現了這個兼容性問題，在Chrome瀏覽器上運行正常，但是在華為瀏覽器，UC瀏覽器上，data無法綁定到html控件。
后來發現同事做的那兩個網頁沒有用vue屬性，一切正常，所以也取消了通過vue的data來綁定數據的方式，直接用原生的方式添加html數據，測試正常。
Vue Resource添加Header的幾種方式
全局添加Header
var mheader = {
'charset': 'UTF-8',
'Content-Type': 'application/json',
'X-LL-APP-CODE': 'PUHUI 1.0.0',
'X-LL-APP-NONCE': '0xffffff',
'X-LL-APP-TOKEN':token
};
Vue.http.options.headers = mheader;
Vue.http.get("url",{emulateJSON:true})
攔截器添加Header
Vue.http.interceptors.push(function(request, next) {
// modify method
request.method = 'GET';
request.headers.set('X-LL-APP-CODE', ' ');
request.headers.set('X-LL-APP-NONCE', ' ');
request.headers.set('X-LL-APP-TOKEN','dfsfdf');
console.log("Hello");
// continue to next interceptor
next();
});
通過這種方式所有的請求都會被攔截，然后如果在攔截器中重新設置了method，那請求就會被重新設置為method中定義的方式，比如上面的Get請求，所有的請求也會被添加攔截器中設置的headers，不要忘了next方法，否則不會繼續執行。
如果你設置了多個攔截器，這些攔截器會依次執行，并不是覆蓋的方式，爽翻。
http請求中添加Header
this.$http.post("url",item, {headers:{
'charset': 'UTF-8',
'Content-Type': 'application/json'
}},{emulateJSON:true})
.then((response) => {
this.getdata=response.data;
console.log(this.getdata);
if (this.getdata == null || this.getdata == undefined) {
console.log("success rent info is null");
return;
}
if (this.getdata.status == true) {
console.log("提交成功");
window.location.href='Success.html';
} else {
alert(this.getdata.message);
}
}, response => {
console.log(response);
});
