Search code examples
reactjscookiessetcookie

Setting secure cookie through HTTPS with XHR on HTTP localhost

I'm running a CRA React app on localhost:3000, the app uses axios and the app makes the following API call to https://api-local.domain.io:3010/xxx/authorize that responds with a header:

set-cookie: gd_resource=XXX; Domain=.domain.io; Path=/; Expires=Thu, 23 Jun 2022 16:08:05 GMT; Secure; SameSite=None

This cookie is configured so that it will be sent to any request to a subdomain of domain.io for any API calls. So it has to be Secure.

But I can see that it is not sent when an API call is sent to https://project-dev.domain.io/yyy.

I don't understand why, is it because I'm running the app on HTTP?

I tried running it on http://editor-local.domain.io:3000 changing my /etc/hosts file but it doesn't change anything.

I've tried running the app on https://localhost:3000 using mkcert but Chrome said the certificate is invalid although my keychain seems to be ok with it.

EDIT

I managed to have my app running on https://editor-local.domain.io:3000 with mkcert but it does not change a thing: the cookie is still not sent with the request

Solution

  • So here is the thing: the parameter withCredentials: true of axios requests has 2 functions:

    • it tells axios to send available cookies;
    • it also tells the browser to save cookies that are returned in the set-cookie header of the response.

    So my request to https://api-local.domain.io:3010/xxx/authorize must be made with withCredentials: true.