最近公司提供一個項目驅(qū)動學(xué)習(xí)Web開發(fā)的機(jī)會，主動承擔(dān)了一部分任務(wù)，開發(fā)了幾個簡單的網(wǎng)頁，學(xué)習(xí)了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瀏覽器上運(yùn)行正常，但是在華為瀏覽器，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);
                        });