vue-axios跨域问题

VUE2.0的 axios 在实际接口调用中常常会遇到跨域问题。一下简单介绍了如何解决跨域问题。

1.首先你的axios要安装成功，具体的请参考
http://blog.csdn.net/qq_38209578/article/details/79225698
2.通过编辑器（IDE）打开你的项目>进入config>index.js
在dev下的proxyTable内输入对应代码

proxyTable: {
      '/api' :{ 
        target: 'http://192.168.0.147/Api',
        changeOrigin: true,//允许跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    },

注：上述的api是变量为你的后端访问的接口

3.通过编辑器（IDE）打开你的项目>进入src>main.js
输入对应代码（然而我在实际的使用中发现，步骤3可以不用，也可以实现跨域，为了安全起见，我还是把代码贴出来）

Vue.prototype.HOST = '/api';//封装跨域接口

4.重启服务器，让服务器跑起来

cnpm run dev

注：非淘宝镜像为 npm run dev

5.完成以上步骤，就可以现实跨域了

dataList() {
                    let submitData = app.getSubmitData();
                    submitData.head.pageSize = 1;
                    let url = 'api/comment/loadding';
                    this.$axios.post(url, submitData).then((response) => {
                        response = response.data;
                        if (response.head.status === 200) {
                            response = response.body;
                            console.log(response)
                        }
                    }).catch((error) => {
                        console.log(error);
                    });
            },

注：上述方法调用，即可实现跨域。submitData只是笔者后端POST请求，后台需要接收的JSON格式数据，如：

{"head":{"version":"v1","accesstoken":"36fa57e9-186a-4e29-824a-310f092d3b8f","pageSize":10,"pageCount":1}