Axios请求拦截器在移动端浏览器未设置Authorization头问题咨询

排查步骤 #

• 连接iOS设备到Mac端，使用Safari开发者工具查看移动端浏览器控制台的报错信息，确认拦截器逻辑内是否存在未捕获的异常。
• 检查localStorage访问逻辑：iOS端浏览器开启无痕隐私模式时，localStorage读写会被限制，window.localStorage.getItem("current_user")可能返回null，你当前代码未做空值判断，直接访问currentUser.accessToken会抛出undefined访问错误，导致拦截器请求回调异常终止，头设置逻辑不生效。
• 检查headers赋值逻辑：你直接给config.headers赋值全新对象，覆盖了Axios内部预设的默认头，Axios v0.23.0在iOS WebKit内核下存在已知的头处理兼容bug，直接覆盖headers会导致自定义头被内部逻辑过滤丢弃。
• 检查服务端CORS配置：如果是跨域请求，服务端未在OPTIONS预检请求的响应中返回Access-Control-Allow-Headers: Authorization的话，iOS浏览器会自动删除请求中的Authorization头，桌面端部分浏览器的宽松校验规则不会触发该限制。

修复方案 #

1. 修正拦截器逻辑，增加异常捕获和头追加逻辑 #

// api.js 修正后代码
export const ProtectedAPI = axios.create({
  baseURL: `${REACT_APP_API_URL}/`,
});

ProtectedAPI.interceptors.request.use(
  (config) => {
    try {
      const currentUserStr = window.localStorage.getItem("current_user");
      if (!currentUserStr) return config;
      const currentUser = JSON.parse(currentUserStr);
      // 仅在token存在时追加头，不覆盖原有headers
      if (currentUser?.accessToken) {
        config.headers.Authorization = `Bearer ${currentUser.accessToken}`;
      }
    } catch (err) {
      // 捕获localStorage读取、JSON解析等异常，避免拦截器终止
      console.error("用户信息读取失败", err);
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

2. 调整Axios版本 #

Axios v0.23.0存在移动端WebKit内核的头处理bug，可升级到v0.24.0及以上版本，或降级到v0.22.0稳定版解决兼容问题。

3. 补充服务端CORS配置 #

确保服务端响应OPTIONS预检请求时，返回以下响应头：

Access-Control-Allow-Headers: Authorization, Content-Type

如果使用Nginx作为反向代理，可在配置中添加：

add_header Access-Control-Allow-Headers "Authorization, Content-Type";

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