React基于axios发送请求时如何动态添加自定义请求头

前端为所有Axios请求添加自定义请求头的实现方案 #

1. 全局配置静态请求头 #

如果自定义头的值是固定值，直接在项目入口（如main.jsx）配置axios全局默认规则即可，不需要在每个单独的请求方法里重复写配置：

import axios from 'axios'

// 配置全局默认自定义请求头，将对应头添加到所有请求中
axios.defaults.headers.common['at_origin'] = '你需要传递的固定Cookie值'
// 保留原有的跨域带Cookie配置
axios.defaults.withCredentials = true

2. 请求拦截器动态添加自定义头 #

如果需要传递的Cookie值是从浏览器端动态获取的，用axios请求拦截器实现更灵活，不需要硬编码值：

// 注册全局请求拦截器，在请求发送前统一修改请求配置
axios.interceptors.request.use(
  config => {
    // 从浏览器Cookie中提取需要的特定值
    const targetCookieRow = document.cookie.split('; ').find(item => item.startsWith('at_origin='))
    const cookieValue = targetCookieRow ? decodeURIComponent(targetCookieRow.split('=')[1]) : ''
    // 将提取的值设置为自定义请求头
    config.headers['at_origin'] = cookieValue
    // 统一携带跨域凭证
    config.withCredentials = true
    return config
  },
  err => Promise.reject(err)
)

配置完成后，所有通过axios发出的请求都会自动带上指定的自定义请求头，不需要在单个接口方法里重复传参。

需要同步调整的后端CORS配置问题 #

当前你遇到的“实际请求仅携带基础accept头”的现象，核心原因是后端CORS规则没有放开自定义头的跨域权限，浏览器会直接拦截未被允许的自定义头向外发送，具体需要修改2个点：

1. 补充允许的请求头列表
   现有CORS过滤器中Access-Control-Allow-Headers的配置没有包含你要传递的自定义头at_origin，需要将该头加入允许列表，修改后的代码行：

   response.setHeader("Access-Control-Allow-Headers", "authorization, content-type, xsrf-token, X-Auth-Token, X-App-Token, X-App-Version, X-App-Env, at_origin");
   

2. 修复过滤器放行逻辑
   现有代码逻辑存在bug：当请求携带origin头（即跨域请求）时，完成校验设置响应头后，没有执行filterChain.doFilter(request, response)放行请求，会导致所有跨域请求无法到达实际接口逻辑。调整后不管校验是否通过，都需要正确处理请求链：

   if (origin != null) {
       HttpStatus statuscode = AuthController.checkUserAuth(request.getHeader("origin"), authStatusCheckUrl);
       if(statuscode.equals(HttpServletResponse.SC_OK)){
           response.setHeader("Set-Cookie", request.getHeader("at_origin"));
           // 校验通过后放行请求
           filterChain.doFilter(request, response);
       } else {
           // 校验不通过返回401状态，不要卡住请求链
           response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
       }
   } else {
       filterChain.doFilter(request, response);
   }
   

注意事项 #

• origin是浏览器强制管控的受保护请求头，前端JS无法手动修改、设置该值，不要尝试在自定义头里重复传递origin值，浏览器会直接拦截这类操作。
• 配置跨域携带凭证时，Access-Control-Allow-Origin不能设置为通配符*，你目前动态读取请求origin设置响应头的写法是符合要求的，保持即可。

内容的提问来源于stack exchange，提问作者Rhea