使用HttpOnly Cookie存储JWT时，请求的Authorization头由谁设置？

核心逻辑说明 #

HttpOnly Cookie的设计初衷就是避免前端JS读取、降低XSS攻击泄露凭证的风险，正常符合规则的请求浏览器会自动携带该Cookie，不需要你手动从Cookie里读取JWT再塞到请求头。

前端axios配置 #

你只需要给axios开启跨域携带凭证的配置即可，两种常用配置方式：

• 全局统一配置：

import axios from 'axios'
axios.defaults.withCredentials = true

• 单请求单独配置：

axios.get('/api/user/info', {
  withCredentials: true
})

注意：如果前后端跨域部署（比如前端跑在localhost:3000、后端跑在localhost:8080），该配置是必须项，否则浏览器不会自动携带Cookie

后端Spring Boot配套配置 #

后端需要做对应调整，否则跨域请求会被拦截：

1. 跨域配置允许携带凭证，且不能设置allowedOrigins为*，必须显式指定允许的前端域名

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("http://localhost:3000") // 替换为实际前端访问地址
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true) // 允许携带凭证
                .maxAge(3600);
    }
}

2. 权限校验逻辑直接从Cookie中读取JWT即可，不需要从请求头的Authorization字段取值

// 过滤器中读取JWT的示例代码
Cookie[] cookies = request.getCookies();
if (cookies != null) {
    for (Cookie cookie : cookies) {
        if ("jwt_token".equals(cookie.getName())) { // 替换为你存储JWT的Cookie名称
            String jwt = cookie.getValue();
            // 执行后续JWT校验逻辑即可
        }
    }
}

额外提示：后端生成存储JWT的HttpOnly Cookie时，建议同时配置SameSite=Lax或者SameSite=Strict属性，降低CSRF攻击风险；如果是跨域场景可配置SameSite=None，同时开启Secure属性（仅HTTPS环境生效）

特殊场景说明 #

如果业务要求必须把JWT放在Authorization请求头中传输，那该方案和HttpOnly Cookie的特性本身冲突，要么放弃HttpOnly改为普通Cookie供前端读取，要么后端登录成功后同时把JWT返回给前端存在localStorage中，两种方案都会提升XSS攻击泄露凭证的风险，不推荐使用。

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