frontend.ro | source tutorials and a community of developers | Collaboration library

So I'm trying to deploy my website which works well when in a local environment, but when it is deployed to Cloudfront, it can't seem to access cookies.

My frontend tech stack is as follows: Angular site hosted on S3, cloudfront distribution in front of it, custom domain name with a valid ssl certificate.

When the user navigates to the login page, they can successfully submit the forum, and the server responds with a JWT token in the Set-Cookie header.

After this though, in the angular site it says that the access-token cookie does not exist. The strange part here is that on subsequent requests, the access-token cookie is in fact forwarded back to the backend. (In the image below, the login button was pressed again, so the response cookie is the same as the request cookie.)

I've ensured that HttpOnly is not set, and that the frontend and backend are both hosted under the same root domain frontend.root.com and api.root.com.

Cloudfront has been configured to forward the access-token cookie:

cache policy:

origin request policy (note that it still did not work when I had this set to forward all cookies and not just the access token):

Response headers settings:

So in my angular site, after the /login api call resolves, I use the ngx-cookie-service to check and try to retrieve the cookie.