HttpOnly Cookie访问异常：始终返回‘Cookie不存在’

我尝试访问一个配置为HttpOnly、Secure、Domain为localhost、Path为/、SameSite为None的Cookie。前端运行在3000端口，后端运行在7014端口，已开启CORS，开发环境下localhost使用HTTPS。

无论执行deleteValue还是getValue操作，接口始终返回‘Cookie不存在’。我已确认fetch请求的payload中key已正确设置为目标Cookie名称jwt。以下是相关代码：

后端ASP.NET Core接口代码 #

[HttpPost("accessCookie", Name = "accessCookie")]
public IActionResult accessCookie([FromBody] CookieRequest cookieBase) {
    string cookieValue = "";

    string key = cookieBase.key ?? "";
    string actionRequest = cookieBase.actionRequest ?? "";

    if (actionRequest != "getValue" && actionRequest != "deleteValue") { 
        return BadRequest(new { success = false, message = "actionRequest not of allowed values" });
    }

    try {
        if (actionRequest == "getValue") {  
            if (HttpContext.Request.Cookies.TryGetValue(key, out cookieValue))
            {
                return Ok(new { success = true, message = cookieValue });
            }
            else
            {
                return BadRequest(new { success = false, message = "Cookie does not exist" });
            }
        }

        if (actionRequest == "deleteValue" && HttpContext.Request.Cookies.TryGetValue(key, out cookieValue))
        {
            HttpContext.Response.Cookies.Delete(key);
            return Ok(new { success = true, message = "Cookie removed" });
        }
        else {
            return BadRequest(new { success = false, message = "Cookie does not exist" });
        }
    } catch {
        return BadRequest(new { success = false, message = "Failed for unknown reason" });
    }

}

CookieRequest类定义 #

public class CookieRequest
{
    public string? key { get; set; }
    public string? actionRequest { get; set; }
}

前端React的fetch请求代码 #

(async () => {
try {
    const response = await fetch(process.env.REACT_APP_apiBaseURL + "/api/Helper/accessCookie", {
        method: "POST",
        headers: {
            "Content-type": "application/json"
        },
        body: JSON.stringify({ "key": "jwt", "actionRequest": "getValue" })
    });

    if (response.ok) {
        const result = await response.json();
        console.log("yay", result);
    } else {
        console.log("HTTP request failed with status", response.status);
    }
} catch (e) {
    console.log(e);
}
})();

请求无报错，但返回结果始终为success: false, message: "Cookie does not exist"，请问我遗漏了什么配置或步骤？

1. fetch请求未配置凭证携带 #

跨域请求默认不会携带Cookie，你需要在fetch配置中添加credentials: "include"，让浏览器主动发送符合条件的Cookie到后端：

(async () => {
try {
    const response = await fetch(process.env.REACT_APP_apiBaseURL + "/api/Helper/accessCookie", {
        method: "POST",
        credentials: "include", // 新增该行
        headers: {
            "Content-type": "application/json"
        },
        body: JSON.stringify({ "key": "jwt", "actionRequest": "getValue" })
    });

    if (response.ok) {
        const result = await response.json();
        console.log("yay", result);
    } else {
        console.log("HTTP request failed with status", response.status);
    }
} catch (e) {
    console.log(e);
}
})();

2. CORS需允许凭证传递 #

后端CORS配置必须开启允许凭证，且不能使用AllowAnyOrigin()（会和凭证允许冲突），需指定具体前端来源：

// 示例CORS配置
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend",
        policy =>
        {
            policy.WithOrigins("https://localhost:3000") // 前端HTTPS地址
                  .AllowAnyHeader()
                  .AllowAnyMethod()
                  .AllowCredentials(); // 必须添加该行
        });
});

// 启用CORS中间件
app.UseCors("AllowFrontend");

3. 验证Cookie的Domain配置 #

localhost下不同端口的Cookie处理存在浏览器差异，可尝试去掉Domain配置，让浏览器自动匹配请求域名；或确认Cookie的Domain严格设置为localhost，且后端响应头的Set-Cookie字段格式正确。

4. 确认SameSite=None的配套设置 #

当Cookie设置SameSite=None时，必须同时搭配Secure属性（你已设置），否则浏览器会拒绝保存该Cookie。可在浏览器开发者工具的Network标签中，查看后端返回的Set-Cookie字段是否包含Secure; SameSite=None。

5. 检查Cookie是否实际存在 #

在浏览器开发者工具的Application标签中，查看https://localhost:7014（后端地址）下的Cookies列表，确认jwt Cookie是否存在。若不存在，需先排查Cookie的创建逻辑是否正确。

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