axios请求前在header头里面添加token(“可作为用户的唯一标识”)

路由拦截在header头添加access_token,每次发送请求就会先获取session里面存的值,有的话就带着,没有就不带

// 请求拦截器中统一的修改config.headers (token来自登录的时候的返回值,或者单独的接口,取到token存起来)

axios.interceptors.request.use(function (config) {
  // console.log('config', config)    //这里可以打印一下看看里面内容
  let token = sessionStorage.getItem("token");	//获取到从后端传来的token,然后存到session里面
  if (token) {
    config.headers["X-Access-Token"] = token;	//然后赋值就行
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

这样用户在每次获取数据之前请求前都会先判断是否有token来辨别返回什么样的信息。

<think>好的,我现在需要回答用户关于如何在Axios中设置HTTP请求头的问题。首先,我要确保自己理解用户的需求。用户可能在端开发中遇到了需要自定义请求头的情况,比如身份验证(如JWT)、跨域携带cookie或者设置特定的内容类型。用户提供的引用内容提到了设置`withCredentials`和`Authorization`,这应该与跨域请求和JWT认证有关。 接下来,我要回忆Axios的配置方式。Axios允许全局配置、实例配置和单个请求配置,这三种方式应该覆盖了大部分使用场景。根据用户提供的引用,他们可能已经尝试过部分方法,但可能遇到问题,比如跨域时的CORS设置,或者部未正确附加。我需要分步骤说明每种配置方法,并指出可能需要注意的地方,比如服务端配合的设置。 然后,我需要整理常见的请求头设置示例。例如,设置`Content-Type`为`application/json`或者`x-www-form-urlencoded`,以及`Authorization`携带token。同时,用户提到`withCredentials`,这个虽然不是请求头,但属于请求配置的一部分,需要解释清楚。这里需要区分请求头请求配置选项,避免混淆。 还要注意引用中的例子,用户可能在全局设置时误将`withCredentials`放在headers里,但实际上它属于请求配置的根级别。这可能导致问题,需要指出正确的设置方式,比如在axios.defaults.withCredentials = true或者在创建实例时配置。此外,服务端需要设置`Access-Control-Allow-Credentials`和允许的源,否则跨域请求会被阻止。 然后,生成相关问题需要考虑用户可能进一步想了解的内容,比如如何处理跨域问题、如何动态设置部,或者常见的错误排查。例如,如果设置Authorization后仍然无法通过验证,可能需要检查token是否正确或过期,或者服务端是否支持该的传递。 最后,确保回答结构清晰,分点说明每种设置方法,并给出代码示例,同时提醒服务端配置的必要性。使用中文回答,并按照用户的要求将独立公式用$$...$$格式,但在这里可能不涉及数学公式,所以主要关注代码块和引用标识的正确使用。检查是否有遗漏的配置方式,比如拦截器的使用,但用户的问题可能更基础,暂时不需要涉及高级内容。确保引用标记正确,用户提供的引用[^1]和[^2]分别对应设置cookie和Authorization的情况,在适当的位置添加引用标识。</think>在Axios中设置HTTP请求可以通过以下三种方式实现,适用于不同场景: ### 1. 全局默认配置 通过修改`axios.defaults.headers`设置所有请求的默认标: ```javascript axios.defaults.headers.common['Authorization'] = 'Bearer your_token'; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; ``` *适用于需要统一携带认证信息或固定内容类型的场景*[^2] ### 2. 自定义实例配置 创建独立配置的axios实例: ```javascript const api = axios.create({ headers: { 'X-Custom-Header': 'value', 'Content-Type': 'application/json' }, withCredentials: true // 跨域携带cookie需单独设置 }); ``` ### 3. 单次请求配置 在具体请求中动态设置标: ```javascript axios.post('/api', data, { headers: { 'Authorization': `Bearer ${token}`, 'Cache-Control': 'no-cache' } }); ``` *建议敏感信息(如JWT)采用此方式动态设置*[^2] ### 注意事项 - 跨域请求需服务端配合设置响应: ```http Access-Control-Allow-Credentials: true Access-Control-Allow-Headers: Authorization, Content-Type ``` - `withCredentials`需在请求配置根节点设置,而非headers内 - 内容类型冲突时,请求配置会覆盖全局配置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

__不靠谱先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值