javascript - 无法在 ASP.NET Core 和 React 中创建包含 jwt 的 httponly cookie

Question

我正在尝试在我的应用程序中实现身份验证方案。 Controller ，更具体地说是方法，负责检查用户的凭据并生成 jwt，然后将其放入 httponly cookie 中，如下所示

    [HttpPost]
    [Route("authenticate")]
    public async Task<IActionResult> Authenticate([FromBody] User user)
    {
        var response = await _repository.User.Authenticate(user.Login, user.Password);
        if (!response) return Forbid();

        var claims = new List<Claim>
        {
            new Claim("value1", user.Login)
        };
        string token = _jwtService.GenerateJwt(claims);

        HttpContext.Response.Cookies.Append(
            "SESSION_TOKEN",
            "Bearer " + token,
            new CookieOptions
            {
                Expires = DateTime.Now.AddDays(7),
                HttpOnly = true,
                Secure = false
            });

        return Ok();
    }

我在 Postman 中测试了这种方法 - 一切都正常运行。 cookie 也正在创建中。此外，最近我使用 Angular 创建了一个应用程序，其中使用相同的身份验证方法，但使用 Angular 的 HTTP 模块始终会创建 cookie。这是使用 Axios 的该方法在我的 React 应用程序中的样子

export const authenticate = async (login, password) => {
 return await axiosLocal.post('/api/auth/authenticate',
    {login, password}).then(response => {
    return response.status === 200;
 }, () => {
    return false;
});

我在尝试登录时收到的所有响应都是响应代码 200。我很确定这与 Axios 的设置有关。另外，如果有人好奇，变量“axiosLocal”包含 API 的基本 URL。

- 更新 1好的。如果我没有弄错的话，为了从响应中设置 cookie，我必须使用 { withCredentials: true } 选项发送所有请求。但是，当我尝试这样做时，请求被 CORS 阻止，尽管我已经设置了一个 cors 策略，该策略必须允许处理来自任何类似来源的请求

app.UseCors(builder => builder.AllowAnyHeader()
            .AllowAnyMethod()
            .AllowAnyOrigin()
            .AllowCredentials());

Answer 1

我刚刚遇到了同样的问题。我修好了。

问题:

• 在浏览器中，httpOnly cookie 被接收但不会返回到服务器

• postman 工作

// Problemable server code for settings httpOnly cookie
Response.Cookies.Append("refreshToken", refreshToken.Token, new CookieOptions
{
   HttpOnly = true,
   Expires = DateTime.UtcNow.AddDays(7),             
});

解决方案:

• 在服务器上.AllowCredentials() 和.SetOriginAllowed(host => true) 或.WithOrigins("https://localhost:3000")

• 在客户端(react、axios)标题中的withCredentials:true

如果仍然无法正常工作，在 Chrome 的 DevTools 中打开“网络”选项卡(当前版本为 v.91.0.4472.124)，选择失败的请求，当您将鼠标放在黄色三 Angular 形上时，您可以看到非常详细的信息cookie 被阻止的原因信息。

 // End server code for setting httpOnly cookie after following the DevTools warnings
Response.Cookies.Append("refreshToken", refreshToken.Token, new CookieOptions
{
      HttpOnly = true,
      Expires = DateTime.UtcNow.AddDays(7),
      IsEssential=true,
      SameSite=SameSiteMode.None,
      Secure=true,
});