最近公司提供一个项目驱动学习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);
});
