如何在 CloudFront 分配后面的 static S3 站点上访问 cookies？

Question

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.

this.cookieService.check('access-token'); // checks if it exists, returns false
this.cookieService.get('access-token'); // returns '' meaning the cookie does not exist

Any ideas on how to resolve this issue and access the cookies from within my angular site? I can provide more information on my configurations if needed. Thanks!

Answer 1

As you can barely make out in the screenshot the Cookies have the domain set as something starting with a suggesting that it is api.root.com , most importantly it is not frontend.root.com and not root.com .

The server needs to set the domain of the cookie to root.com for it to be available to all subdomains of it.