跨域Cookie问题：本地React访问托管ASP.NET Web API时Cookie丢失

先解决当前Cookie消失的问题 #

你的问题本质是跨域场景下的Cookie存储/读取限制，结合代码和现象，按以下步骤排查调整：

1. 前端请求必须开启跨域凭证 #

不管用Axios还是Fetch，跨域请求API时必须携带凭证标识，否则浏览器会拒绝接收服务器设置的Cookie：

• Axios示例：

  axios.post('https://your-api-domain/auth/login', loginData, {
    withCredentials: true
  })
  

• Fetch示例：

  fetch('https://your-api-domain/auth/login', {
    method: 'POST',
    credentials: 'include',
    body: JSON.stringify(loginData),
    headers: { 'Content-Type': 'application/json' }
  })
  

2. 修正Cookie的Path设置 #

你的AccessToken Cookie没有指定Path，默认会绑定到当前请求的接口路径（比如/auth/login），导致只有访问该路径及其子路径时才会携带Cookie，其他API接口无法读取。修改代码添加Path="/"，让Cookie在整个API域名下生效：

private void SetAccessTokenInResponse(string accessToken)
{
    Response.Cookies.Append(AccessTokenName, accessToken, new CookieOptions
    {
        HttpOnly = false,
        Secure = true,
        SameSite = SameSiteMode.None,
        Expires = DateTime.Now.AddMinutes(15),
        Path = "/" // 新增：全局路径生效
    });
}

RefreshToken的Path="/auth/refresh-token"设置合理，保留即可。

3. 本地React应用切换到HTTPS #

因为你设置了Secure=true，Cookie只能在HTTPS环境下被存储和发送。如果本地React用HTTP（比如默认的localhost:3000），浏览器会拒绝持久化存储Secure Cookie——这就是为什么只有开启开发者工具时临时生效（部分浏览器对localhost的HTTP有宽松策略，关闭DevTools后恢复严格限制）。

启动React时强制开启HTTPS：

HTTPS=true npm start

4. 显式设置Cookie的Domain #

如果你的API域名是xxx.smarterasp.net，显式指定Domain可以避免浏览器误判：

// 在CookieOptions中添加
Domain = "xxx.smarterasp.net"

注意Domain必须是API的实际域名，不能用顶级域名（比如.smarterasp.net），否则浏览器会拒绝。

是否应该改用JSON返回Token？ #

两种方案各有优劣，按需选择：

• 继续用Cookie方案：调整上述配置后应该能解决问题，优势是HttpOnly类型的RefreshToken可以规避XSS攻击，安全性更高，适合需要严格安全的场景。
• 改用JSON返回Token：前端将Token存在localStorage/sessionStorage，请求时在Authorization头中携带Bearer {token}。这种方案跨域配置更简单，但localStorage中的Token容易被XSS窃取，安全性稍低。

优先建议先调整Cookie的配置和前端请求设置，解决现有问题；如果调整后仍有无法解决的跨域限制，再考虑切换到Token返回方案。

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