1

I have my React front-end running on http://localhost:3000 and ASP.NET Core back-end on https://localhost:44378. I don't see cookies in requests though I see them in Chrome:

enter image description here

Here is some requests headers:

sec-fetch-mode: cors
sec-fetch-site: cross-site

I tried to set cookies myself:

HttpContext.Response.Cookies.Append("my1", "cookie.None", new CookieOptions() {
    Expires = DateTime.UtcNow.AddYears(1), SameSite = SameSiteMode.None, Secure = true,
});
HttpContext.Response.Cookies.Append("my2", "cookie.Lax", new CookieOptions() {
    Expires = DateTime.UtcNow.AddYears(1), SameSite = SameSiteMode.Lax, Secure = true,
});
HttpContext.Response.Cookies.Append("my3", "cookie.Strict", new CookieOptions() {
    Expires = DateTime.UtcNow.AddYears(1),  SameSite = SameSiteMode.Strict, Secure = true,
});

I see them in Chrome:

set-cookie: my1=cookie.None; expires=Sun, 29 May 2022 15:28:59 GMT; path=/; secure; samesite=none
set-cookie: my2=cookie.Lax; expires=Sun, 29 May 2022 15:28:59 GMT; path=/; secure; samesite=lax
set-cookie: my3=cookie.Strict; expires=Sun, 29 May 2022 15:28:59 GMT; path=/; secure; samesite=strict

But they don't appear in the table above and don't come to the back-end.

This is how I try reading them:

app.Use(async (context, next) =>
{
    foreach (var p in context.Request.Cookies)
    {
        log.Info($"{p.Key} - {p.Value}");
    }
    log.Info(context.Request.Path);
    await next.Invoke();
});

EDIT: changing front-end to https I got

sec-fetch-mode: cors
sec-fetch-site: same-site

Still doesn't work though port should not be an issue. But when I run front-end and back-end in the same process, so no cors is needed it works fine.

Yola
  • 18,496
  • 11
  • 65
  • 106

1 Answers1

1

Seems like my requests were considered CORS so I did two things:

  1. On server side I added .AllowCredentials() inside my services.AddCors(...) call. This adds access-control-allow-credentials: true to the response.
  2. On the client side I instructed axios to include credentials into the request with axios.get(..., { withCredentials: true }).
  3. Start front-end with HTTPS=true npm start to have them both on https.
Yola
  • 18,496
  • 11
  • 65
  • 106