vue.js填坑之旅 ： this.$http 跨域访问

这个坑浪费了我一天半的时间，记录一下填坑步骤。

1、服务器配置

location / {

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Headers X-Requested-With;

add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

}

不知道有没有用，不过还是加上吧。

2、服务器脚本配置

header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

header('Access-Control-Allow-Origin: 写你的域名');

这个是不能少的，一般写在返回数据的方法中就行。

3、vue中使用$http.post

methods: {

     // 页面数据初始化

     pageDataLoad () {

            var that = this;

            that.$http.post('http://xh.huobull.net/app_home/index', {}, {

                    emulateJSON: true

            }).then(

                    function (res) {

                             // 轮播图

                             that.bannerList = res.data.data.banner.map((item, index) => ({

                                      url: '',

                                       img: item.value,

                                       title: ''

                              }));

                   }, function (error) {

                   })

            }

}

一定要将this重命名，不然在then中this会被覆盖。