vue axios拦截器请求头设置token 跨域，vue.config设置代理 无效的解决办法 ...

前置条件：
本地启动的：
前端，端口：8080
后端，端口：10000
需求：
在每次请求时我把token放在请求头中，就考虑到在请求拦截器里面进行设置，设置代码如下：

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

复制代码

请求接口如下：

1. axios("/article/articleType")

复制代码

报错信息如下：



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

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

复制代码

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

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

复制代码

vue.config.js修改

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

复制代码

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

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

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

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