axios跨域

最新推荐文章于 2025-04-14 09:54:40 发布

勤能补拙的笨小孩

最新推荐文章于 2025-04-14 09:54:40 发布

阅读量1k

点赞数

文章标签： VUE

本文链接：https://blog.youkuaiyun.com/weixin_39081577/article/details/100515263

版权

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