html+Css+Vue.js开发网页遇到的几点问题

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