最近公司提供一個項目驅(qū)動學習Web開發(fā)的機會谨读，主動承擔了一部分任務(wù)雏搂，開發(fā)了幾個簡單的網(wǎng)頁椒袍，學習了Vue.js框架驼唱，使用了最簡單的html引入vue.js的開發(fā)方式，其中發(fā)現(xiàn)了幾個問題驹暑。
Vue Resource 添加Headers之后請求自動變?yōu)镺PTIONS的問題
網(wǎng)絡(luò)請求使用了Vue Resource玫恳，開始在本地開發(fā)的過程中，不管添加Header與否优俘，訪問接口都正常京办，但是在部署到域名網(wǎng)站下測試之后，發(fā)現(xiàn)添加了Header的POST帆焕、GET惭婿、PATCH請求都會變成OPTIONS請求，但是由于服務(wù)端并沒有兼容OPTIONS請求，所以就會返回405錯誤财饥，訪問失敗换吧。
這個問題查找了資料之后發(fā)現(xiàn)，這是由于跨域問題導(dǎo)致的（部署網(wǎng)頁的地址和訪問接口的地址不一致）钥星，都會先發(fā)送OPTIONS請求式散，無法在我這邊修改，只有服務(wù)端兼容OPTIONS打颤。服務(wù)端在修改中暴拄，還沒有驗證。
在本地打開網(wǎng)頁之所以不存在這個問題编饺，是因為本地并沒有部署乖篷，所以不存在跨域的問題，故訪問正常透且。
Vue.js通過html方式引入在不同瀏覽器上的兼容性問題
在使用data屬性綁定到html控件上時撕蔼，發(fā)現(xiàn)了這個兼容性問題，在Chrome瀏覽器上運行正常秽誊，但是在華為瀏覽器鲸沮，UC瀏覽器上，data無法綁定到html控件锅论。
后來發(fā)現(xiàn)同事做的那兩個網(wǎng)頁沒有用vue屬性讼溺，一切正常，所以也取消了通過vue的data來綁定數(shù)據(jù)的方式最易，直接用原生的方式添加html數(shù)據(jù)怒坯，測試正常。
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();
});
通過這種方式所有的請求都會被攔截藻懒，然后如果在攔截器中重新設(shè)置了method剔猿，那請求就會被重新設(shè)置為method中定義的方式，比如上面的Get請求嬉荆，所有的請求也會被添加攔截器中設(shè)置的headers归敬，不要忘了next方法，否則不會繼續(xù)執(zhí)行鄙早。
如果你設(shè)置了多個攔截器汪茧，這些攔截器會依次執(zhí)行，并不是覆蓋的方式蝶锋，爽翻陆爽。
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);
});
