浏览器中Axios/Fetch无法向Spring Boot JWT API传递Cookie问题

我用JWT认证开发了一个Spring Boot API，登录接口http://localhost:8080/api/signin登录成功后，会返回存着JWT Token的JSESSIONID Cookie，这一步正常。但在浏览器中调用其他API接口时，Cookie无法随请求传递。

生成的JWT Cookie格式如下：

JSESSIONID=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImlhdCI6MTY4NTE1Mzk5NSwiZXhwIjoxNjg1MjQwMzk1fQ.9jxHyzDJKVra8IryxbH8se0xSl4_DkapNsKmjRCvlJs_R8M3x3RBMeo-1VPAJv6YSQwC6ukJutRwGEyfeYrGwQ; Path=/; HttpOnly; Expires=Sun, 28 May 2023 02:38:33 GMT;

测试情况：

• 使用curl命令调用接口正常：

curl --location 'http://localhost:8080/user/admin/all' --header 'Cookie: JSESSIONID=mycookie' 

能正常获取JSON数据。

• 但浏览器前端用Axios请求时返回401错误：

axios
  .get("http://localhost:8080/user/admin/all", {
    headers: {
      Cookie:
        "JSESSIONID=mycookie",
    },
  })
  .then((response) => {
    console.log(response.headers);
    console.log(response.data);
  })
  .catch((error) => {
    console.error("Erro:", error);
  });

错误信息：

GET http://localhost:8080/user/admin/all 401

1. 浏览器安全限制：手动设置Cookie头被拦截 #

浏览器出于安全策略，不允许前端JS手动设置Cookie请求头，你在Axios里手动配置的Cookie头会被浏览器直接忽略，导致请求根本没携带Cookie，触发401。

解决方法：
不要手动设置Cookie头，让浏览器自动携带Cookie，需满足以下前提：

• 前端页面与API接口同源（协议、域名、端口完全一致）；
• 跨域场景下，后端和前端需配合配置跨域凭证支持。

2. 跨域请求（CORS）配置缺失 #

如果前端页面运行在与API不同的端口/域名下（比如前端localhost:3000、APIlocalhost:8080），属于跨域请求，必须同时配置后端CORS和前端请求参数：

后端Spring Boot配置 #

在CORS配置中开启允许携带凭证，并指定明确的前端Origin（不能用*）：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000") // 替换为你的前端地址
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true); // 允许携带Cookie等凭证
    }
}

前端Axios配置 #

请求时开启withCredentials: true，让浏览器自动携带Cookie：

axios
  .get("http://localhost:8080/user/admin/all", {
    withCredentials: true // 关键配置
  })
  .then((response) => {
    console.log(response.headers);
    console.log(response.data);
  })
  .catch((error) => {
    console.error("Erro:", error);
  });

3. Cookie的SameSite属性配置问题 #

当前主流浏览器默认SameSite为Lax，跨域场景下不会携带Cookie。需根据场景调整：

• 同源请求：可设为Strict或Lax；
• 跨域请求：需设为None，且必须配合Secure属性（即HTTPS环境）。

Spring Boot中设置Cookie示例：

Cookie cookie = new Cookie("JSESSIONID", jwtToken);
cookie.setPath("/");
cookie.setHttpOnly(true);
cookie.setMaxAge(86400);
cookie.setSecure(true); // HTTPS环境下启用
cookie.setAttribute("SameSite", "None"); // 跨域时设置
response.addCookie(cookie);

4. HttpOnly属性的误解 #

你的Cookie设置了HttpOnly，这个属性仅禁止前端JS读取/修改Cookie，但不影响浏览器自动携带Cookie到同源/合法跨域的请求中，所以它不是导致请求无Cookie的原因。

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