axios全局添加跨域请求头 axios设置header解决跨域

转载

mob6454cc6d1c0b 2023-08-18 14:10:10

文章标签 axios全局添加跨域请求头 vue.js javascript ios 跨域 文章分类 iOS 移动开发

前置条件：
本地启动的：
前端，端口：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")

报错信息如下：

axios全局添加跨域请求头 axios设置header解决跨域_跨域

axios全局添加跨域请求头 axios设置header解决跨域_跨域_02

axios全局添加跨域请求头 axios设置header解决跨域_ios_03

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

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设置拦截器跨域这两个问题上。一直在找…
…
…
…
…
就在早上看到了一篇文章，，然后去试着改了，发现成功了。

总结：
排查的时候需要以下注意点：