跨域是防止页面去请求另外一个源的数据。协议,端口,域名,只要这个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