后端请求头为何无法获取到Authorization字段？

Question

在前后端分离开发中，前端通常通过设置请求头中的 `Authorization` 字段实现身份认证（如 JWT）。但在实际开发中，有些开发者会遇到后端无法获取到请求头中 `Authorization` 字段的问题。这通常是由于跨域请求（CORS）预检（preflight）机制导致的。浏览器在发送跨域请求前会先发送 `OPTIONS` 请求，如果后端未正确配置响应头（如 `Access-Control-Allow-Headers` 未包含 `Authorization`），则浏览器会拦截后续请求，导致 `Authorization` 头字段丢失。此外，也可能是后端框架对请求头字段名称大小写敏感或进行了过滤处理。解决此问题的关键在于确保前后端对请求头的配置一致，并正确处理跨域请求的相关策略。

Answer 1

前后端分离开发中 Authorization 请求头丢失问题深度解析

在现代 Web 开发中，前后端分离架构已经成为主流。前端通过 HTTP 请求与后端通信，并使用 JWT（JSON Web Token）等机制进行身份认证。通常的做法是将 Token 放置在请求头的 Authorization 字段中，格式为：Bearer <token>。

但在实际开发过程中，一些开发者会遇到一个常见问题：后端无法获取到前端发送的 Authorization 请求头字段。这个问题往往不是前端或后端单方面的问题，而是由于跨域请求（CORS）机制、请求头大小写敏感、中间件过滤等原因造成的。

一、从浅层看问题：请求头未被正确传递

前端在发起请求时，确实在 headers 中设置了 Authorization，但后端却始终拿不到这个字段。这种现象一般表现为：

• 浏览器控制台没有报错，但后端日志显示请求头中无 Authorization。
• 某些请求能正常拿到 token，而某些请求则不行。

这说明问题可能出在 CORS 预检请求（preflight）阶段，或者是后端框架对 header 的处理方式存在差异。

二、深入分析：CORS 与 OPTIONS 请求的作用机制

CORS（Cross-Origin Resource Sharing）是一种浏览器安全机制，用于防止不同源之间的非法访问。当请求满足以下任一条件时，浏览器会先发送一个 OPTIONS 请求作为预检：

• 使用了自定义请求头，如 Authorization
• 使用了除 GET, HEAD, POST 外的方法
• POST 请求的 Content-Type 不是 application/x-www-form-urlencoded, multipart/form-data, 或 text/plain

OPTIONS 请求的目的是询问服务器是否允许该请求。如果服务器返回的响应头中没有包含正确的 Access-Control-Allow-Headers: Authorization，那么浏览器就会拦截后续的真实请求，导致 Authorization 头字段丢失。

三、解决方案详解

1. 配置后端响应头支持 Authorization

2. 确保后端在响应 OPTIONS 请求时，返回如下响应头：

   
   Access-Control-Allow-Origin: *
   Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
   Access-Control-Allow-Headers: Authorization, Content-Type
               

3. 检查后端框架是否忽略 Authorization 头

4. 有些框架（如某些版本的 Spring Boot、Django 等）可能会对请求头字段名大小写敏感，或者默认不解析某些字段。例如，在 Node.js + Express 中，可以通过如下方式打印所有请求头进行调试：

   
   app.use((req, res, next) => {
       console.log(req.headers);
       next();
   });
               

5. 前端设置 withCredentials 以支持凭证跨域

6. 如果涉及 Cookie 或者需要携带凭证信息，前端应设置 withCredentials = true，并确保后端也允许：

   
   fetch('/api/login', {
       method: 'POST',
       headers: {
           'Content-Type': 'application/json',
           'Authorization': 'Bearer your_token_here'
       },
       credentials: 'include'
   });
               

四、流程图展示：从请求发出到后端接收的全过程

graph TD
    A[前端发起请求] --> B{是否跨域?}
    B -- 是 --> C[浏览器发送 OPTIONS 预检请求]
    C --> D[后端响应 OPTIONS]
    D -- 允许请求头含 Authorization --> E[浏览器发送真实请求]
    D -- 不允许 --> F[浏览器拦截请求]
    B -- 否 --> G[直接发送真实请求]
    E --> H[后端接收请求并解析 Authorization]
    G --> H
        

五、总结与延伸思考

解决 Authorization 请求头丢失的问题，关键在于理解浏览器的安全机制（尤其是 CORS）以及前后端如何协同工作。

此外，还可以考虑使用其他认证机制，如基于 Cookie 的 Session 认证，但这又会带来新的安全挑战，比如 CSRF 防护。

对于经验丰富的开发者来说，这类问题不仅是技术细节的排查，更是对整个 HTTP 协议和现代 Web 安全模型的深刻理解。