ASP.NET Core Web API与ReactJS间HttpOnly Cookie交互异常排查

核心原因：前端请求未携带凭据配置 #

跨域场景下，浏览器默认不会在请求中携带或接收Cookie，即便后端配置了CORS允许凭据，前端也必须显式声明要携带凭据。你的fetch请求缺少credentials: 'include'选项，导致HttpOnly Cookie无法被浏览器保存。

修改前端登录代码 #

更新signIn函数的fetch配置，添加credentials: 'include'：

export const signIn = async (data: LoginFormData):Promise<LoginResponseData> => {
    const response = await fetch(`${API_BASE_URL}/api/auth/login`,{
        method: "POST",
        headers:{
            "Content-type":"application/json"
        },
        credentials: 'include', // 新增这一行
        body: JSON.stringify(data)
    });
    if (!response.ok) {
        throw new Error("Something went wrong...");
    }
    const returnJson = await response.json();
    localStorage.setItem("accessToken",returnJson.accessToken);
    return returnJson;
}

补充后端Cookie配置优化 #

开发环境下，建议为Cookie添加SameSite属性，避免浏览器的跨域Cookie限制：

Response.Cookies.Append("auth_token", refreshToken, new CookieOptions()
{
    HttpOnly = true,
    Secure = false, // 开发环境用http，生产环境改为true
    Expires = DateTime.Now.AddDays(7),
    SameSite = SameSiteMode.Lax // 开发环境用Lax，生产环境改为SameSiteMode.None并搭配Secure=true
});

注意：生产环境中，SameSiteMode.None必须配合Secure=true（仅在HTTPS下传输），否则浏览器会拒绝保存Cookie。

额外检查点 #

• 确认API_BASE_URL是正确的跨域地址（比如http://localhost:5000），与React应用的http://localhost:5173属于不同端口，符合跨域场景。
• 查看浏览器控制台的Application -> Cookies面板，检查是否有auth_tokenCookie；若仍未出现，查看Console面板是否有CORS相关错误提示。
• 后端UseCors的调用顺序要正确：必须放在UseRouting之后，UseAuthentication和UseAuthorization之前。

关于HttpOnly Cookie的工作机制 #

HttpOnly Cookie是浏览器禁止JS读取的Cookie，仅会在每次请求时自动携带到后端，所以你无法在React代码中直接获取auth_token的值，这是正常的安全设计。刷新Access Token时，只需发起后端的刷新接口，浏览器会自动携带该Cookie，后端从Request.Cookies中读取即可。

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