axios跨域

跨域是防止页面去请求另外一个源的数据。协议，端口，域名，只要这个3个中有一个不同就是跨域。

VUE默认只解决开发环境，也就是本地的跨域问题，测试环境以及线上的跨域问题由其他方式解决。我们先看看开发环境跨域问题怎么解决。

开发环境

使用 Vue-cli 创建的项目，开发环境的url是http://localhost:8080，与我们请求的接口url=不一致，所以肯定会遇到跨域问题。解决方案如下：

1、在vue项目根目录下找到/config/index.js文件

路径

2、index.js文件中找到proxyTable配置项

 proxyTable: {
    '/api': {
        target: 'http://www.xxx.com', // 需要跨域请求的地址或者IP
        changeOrigin: true, //  表示是否跨域
        pathRewrite: {
            '^/api': '/api' //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉 
        }
    }
}

3、axios 请求

axios.get('/report/data.json').then((res) => { 
　　console.log(res)
}).catch((err) => {
　　console.log(err)
})

如果希望项目更便于管理，就写一个公用的接口js文件，公用接口文档见这里~

生产环境

我们项目做完以后要在测试环境运行的时候，我们无法单方面解决跨域问题的，需要接口配合。
需要后台接口更改header

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

我们需要做的是：设置测试环境统一接口域名，

Axios.defaults.baseURL='http://apis.baidu.com'
Axios.get('/user')  //访问/user就相当于访问 http://apis.baidu.com/user