如何在ASP.NET Core 6 Web API中为React前端设置浏览器Cookie？

我来帮你排查这个问题，你遇到的情况很典型，主要是跨域请求的Credentials配置和Cookie的Secure属性在开发环境的冲突导致的，一步步来解决：

1. 前端axios请求必须携带Credentials #

你的前端代码里没有设置withCredentials: true，这是跨域请求中Cookie能被浏览器存储的关键配置。修改你的请求代码：

const getData = async () => { 
  await axios.get("/weatherforecast", { withCredentials: true }); 
};

axios默认不会携带跨域的Cookie，必须显式开启这个选项，配合后端的AllowCredentials()才能让浏览器处理Cookie。

2. 调整Cookie的Secure属性（开发环境专属） #

你设置了Secure = true，这个属性要求只有在HTTPS连接下Cookie才会被存储。但你的前端是运行在http://localhost:3000（HTTP协议），而ASP.NET Core开发环境默认是HTTPS（比如https://localhost:5001），这种混合协议的跨域请求中，浏览器会拒绝存储Secure属性的Cookie。

开发环境下可以临时把Secure设为false：

Response.Cookies.Append("myjwt", "ABCDE", new CookieOptions {
    Secure = false, // 开发环境改为false，生产环境再改回true
    HttpOnly = true,
    SameSite = SameSiteMode.Lax // 开发环境用Lax更合适，None需要配合Secure
});

如果想在开发环境保留Secure，你需要把前端也改成HTTPS运行：在React项目的package.json里修改启动命令为"start": "HTTPS=true react-scripts start"，这样前端会在https://localhost:3000运行，和API的HTTPS一致，就能正常存储Secure Cookie了。

3. 验证CORS配置的正确性 #

你的Program.cs里的CORS配置看起来没问题，但要确保WithOrigins里的地址完全匹配前端的地址（包括协议和端口），比如前端如果改成HTTPS，就要把地址改成"https://localhost:3000"。

另外，AllowCredentials()必须和WithOrigins一起用，不能用AllowAnyOrigin()，你现在的配置是对的，这点没问题。

测试验证 #

做完上面的修改后，重新启动API和前端，调用接口后再去Network > Application > Cookies里查看，应该就能看到myjwt Cookie了。生产环境记得把Secure改回true，SameSite设为None（如果需要跨站请求），同时确保前后端都是HTTPS。

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