How do you view cookies set via AJAX CORS requests in Chrome dev tools?

Question

I'm seeing rather confusing behaviour in Chrome. Cookies that I set via a cross-origin AJAX request don't show up in the browser's dev tools inspector. I'm sure they're being set but there's no way of viewing them locally.

I want to use Chrome devtools to view cookies that have been set by my API

My front end is a SPA and hosted on a different server to my (Rails) API. When testing locally, they're merely different ports: one is on locahost:3000 and the other is on localhost:4200. So that I can use cookies with API requests, I've set my serverside CORS policy to allow for withcredentials. On the client, I have set my (Angular) cross-origin requests to have the header withCredentials=true.

I've verified that the server is actually sending the cookie to the browser

When I make a request to the server, the server sets the cookie and I can see it in the response headers:

...but it doesn't shows up in Chrome devtools (or Safari)

I know it's set successfully becuase it shows up in subsequent requests

I would have assumed that the cookie had simply failed to be set but when I inspect the next request to the API I can see the cookie both in the request payload in Chrome:

And it also shows up on the (Rails) server in the request.cookies

pry> request.cookies
=> {
 "my_cookie"=>"its value"}

Why can't I inspect this cookie in Chrome?

And is there a way to get around it - either in Chrome or in a different inspector? I just want a way to view and verify these cookies.

Answer 1

Cookies are set on the browser by the client application, from your screenshots, you are inspecting the server on port 4200 instead of your client application running on port 3000

Answer 2

This should show up as a seperate "Cookies" tab when you inspect the XHR request. It's easy to miss because the tab only shows when withCredentials is set to true.