0

While developing a SPA (React) which communicates with a ASP.Net Core API (both on localhost) the cookie will be set after a successfull login. But when deploying both applications under the same IIS (version 10) the API sets the cookie inside the login-resonse but the browser does not add the cookie for further requests. The React application runs as well as the API runs over HTTPS with a signed certificate.

I use ASP Net Identity as authentication-mechanism.

services.ConfigureApplicationCookie(config =>
{
  config.Cookie.Name = "my-simple-cookie";
  config.Cookie.HttpOnly = false;
  config.ExpireTimeSpan = TimeSpan.FromDays(14);
  config.Cookie.SameSite = SameSiteMode.None;
  config.Cookie.SecurePolicy = CookieSecurePolicy.Always;
  config.SlidingExpiration = false;
});

This images shows that on productive and development the cookie is send by the api

As you can see the client receives the set cookie inside the response-header but the browser doesnt set it in productive.

Furthermore I am wondering why the browser does a pre-flight before sending the login-request which does not happen when running on localhost.

Thanks for your help!

dpa
  • 117
  • 1
  • 11
  • Hi, when both run on localhost, both apps are on the same origin: localhost. When you run them in prod I'm guessing you use two different origins (urls) for the apps, so they now sit in different origins. Your request has become a cross site request, hence the preflight request to check for CORS headers and see if this cross site request is allowed by your API. – Pablo Recalde Jun 28 '22 at 10:57
  • Do you need to read the cookie from client-side or only by the API? – Pablo Recalde Jun 28 '22 at 11:00
  • 1
    The same cross site logic applies to cookies, if your origins are completely different, the cookie will be a thid-party cookie (as it belong to a completely different origin), and Chrome's Incognito mode will refuse to send it on any request (except those made from the same site) In other words, Chrome's Incognito mode doesn't send third party cookies, and if both applications sit on different origins, your cookie is effectively a third party cookie. – Pablo Recalde Jun 28 '22 at 11:03

2 Answers2

0

When you run your spa project, you can access https://...:44354 and https://...:3000. They are like two different application. So we need to share cookies in both sites.

You can refer this answer and share the cookie.

1. Sharing Cookies Between Two ASP.NET Core Applications

Related Post:

Cookies are not set in browser in SPA to API communication

Jason Pan
  • 15,263
  • 1
  • 14
  • 29
0

So I figured out what the problem was: When running in localhost/development environment doing api calls with Axios includes the "withCredentials" flag automatically. But when running on productive you need to add the flag explicitly.

Which means changing

  axios
    .post(resultingUrl, parameters)
    .then((response: AxiosResponse) => {
      if (callbackFn) {
        if (response.data) {
          callbackFn(response.data as Z);
        } else {
          callbackFn();
        }
      }
    })
    .catch((error: AxiosError) => {
      if (errorCallbackFn) {
        errorCallbackFn(error.message);
      }
    });

to

  axios
    .post(resultingUrl, parameters, { withCredentials: true })
    .then((response: AxiosResponse) => {
      if (callbackFn) {
        if (response.data) {
          callbackFn(response.data as Z);
        } else {
          callbackFn();
        }
      }
    })
    .catch((error: AxiosError) => {
      if (errorCallbackFn) {
        errorCallbackFn(error.message);
      }
    });

This solved my whole problem!

dpa
  • 117
  • 1
  • 11