ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue axios拦截器请求头设置token 跨域，vue.config设置代理无效的解决办法 [打印本页]

作者: 王國慶 时间: 2022-6-25 20:36
标题: vue axios拦截器请求头设置token 跨域，vue.config设置代理无效的解决办法
前置条件：
本地启动的：
前端，端口：8080
后端，端口：10000
需求：
在每次请求时我把token放在请求头中，就考虑到在请求拦截器里面进行设置，设置代码如下：

axios.defaults.baseURL = "http://localhost:10000"
axios.interceptors.request.use(config => {
config.headers.token = 'token' // 先使用假token进行测试
return config
}, error => {
console.log(`err`, error)
})

复制代码

请求接口如下：

axios("/article/articleType")

复制代码

报错信息如下：

说是跨域了；后端也设置阻止跨域了，代码如下：

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With,token");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("Access-Control-Allow-Credentials", true);

复制代码

但还是莫名奇妙的报错；
于是想到了使用代理，
在vue项目里面使用代理的时候，需要看清是vue脚手架还是webpack脚手架，网上说vue脚手架配置在vue.config.js，webpack配置在webpack.config.js里面
我使用的是vue的，版本是3的
然后配置，配置的时候和网上的一样，下面参考了一下网上的，我在上面做了改动，改动的地方就是我出问题的地方：
axio配置参数修改：

axios.defaults.baseURL = "/api"
axios.interceptors.request.use(config => {
config.headers.token = 'token' // 先使用假token进行测试
return config
}, error => {
console.log(`err`, error)
})

复制代码

vue.config.js修改

module.exports = {
devServer:{
//proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
proxy:{
'/api':{
target: 'http://localhost:10000',//代理地址，这里设置的地址会代替axios中设置的baseURL
changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
//ws: true, // proxy websockets
//pathRewrite方法重写url
pathRewrite: {
'^/api': '/'
//pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
//pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
}
}}
},

复制代码

上面的配置就是我在vue.config.js里面配置的，然后他不起作用，找遍全网，没找到解决办法，思想盯在了vue设置代理无效，axios设置拦截器跨域这两个问题上。一直在找…
…
…
…
…
就在早上看到了一篇文章，https://bbs.csdn.net/topics/395553952，然后去试着改了，发现成功了。
总结：
排查的时候需要以下注意点：

注意每个版本不同
找官方的使用方法
找网上的使用例子
如果结构一致，那就从细枝末节开始对比（比如这里的target，他的值应该怎么写）

疑问：
我成功测试之后发现axios的拦截器设置了token，然后打印了config；
请求的接口是http://localhost:8080/api/article/articleType
从发起请求，在前端最后经过处理的是代理?

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)