I use express app as backend.
I set cors middleware:
app.use(cors({
credentials: true,
origin: 'http://localhost:3000' //client host
}));
Here are cookie options I set:
res.cookie(this.refreshCookieName, refreshToken, {
httpOnly: false,
path: `/api`,
sameSite: 'lax',
maxAge: accessCookieMaxAge,
secure: false
});
On frontend app I make requests via axios. And, yes, I set withCredentials for instance config:
export const apiInstance = axios.create({
withCredentials: true,
baseURL: 'http://localhost:5000/api/' //backend host
});
I use chrome web browser on ubuntu os.
On "Network" tab of DevTools when I click on request and open "Cookies" tab of request I can see cookies there #screenshot1.
But cookies are not visible in "Cookies" section on "Application" tab of DevTools #screenshot2. Which is frustrating, because I would like to have ability to remove cookies.
Is it possible to make them visible on "Application" tab? If yes, how?
By the way cookies were visible when I tried to use firefox.
2
Answers
Not sure why chrome DevTools doesn't show cookies with path property value that is not included in current browser url. Maybe the purpose of such chrome behavior was to let developers see which cookies will be sent and receieved exactly on current browser url. I don't know... But when I changed cookies from path='/api' (I don't have page with url /api on my frontend app) to path='/' on backend, chrome began to show cookies in "Application" tab of DevTools.
Chrome just updated to a new version and now you can’t see some cookies, I recommend you to install cookie manager or some extension like that.
That was what I did.