vue中interceptors拦截器中添加的请求头被参数替换怎么办

Question

本来是这样的,一开始的请求头

这个是浏览器url地址的的请求参数

然后token就被替换了!

Answer 1

参考GPT和自己的思路：

根据你提供的信息，可以看出你的请求头中使用了一个叫"Authorization"的参数来传递token值。而在浏览器地址栏中，请求参数中也使用了一个名为"token"的参数。这两者之间的差异，导致了拦截器中添加的请求头被替换掉了。

解决这个问题的方法很简单，你只需要在拦截器中给"Authorization"参数的值设置成请求参数中的"token"参数即可。具体的代码如下：

axios.interceptors.request.use(config => {
  const token = getUrlParam('token') // 获取浏览器地址栏中的"token"参数
  if (token) {
    config.headers.Authorization = `Bearer ${token}` // 给"Authorization"参数设置token值
  }
  return config
})

function getUrlParam(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  const r = window.location.search.substr(1).match(reg)
  if (r != null) {
    return unescape(r[2])
  }
  return null
}

其中，getUrlParam函数是用来从浏览器地址栏中解析出参数的函数。使用这个函数可以获取到"token"参数的值，然后把它赋值给"Authorization"参数的值即可。需要注意的是，"Authorization"参数的值需要添加"Bearer "前缀才能够被服务器正确识别。