英文:
Cookies are not present in application tab of chrome DevTools
问题
我在后端使用 Express 应用程序。
我设置了跨域中间件：
app.use(cors({
credentials: true,
origin: 'http://localhost:3000' //客户端主机
}));
这是我设置的 Cookie 选项：
res.cookie(this.refreshCookieName, refreshToken, {
httpOnly: false,
path: `/api`,
sameSite: 'lax',
maxAge: accessCookieMaxAge,
secure: false
});
在前端应用程序中，我通过 axios 发送请求。是的，我在实例配置中设置了 withCredentials：
export const apiInstance = axios.create({
withCredentials: true,
baseURL: 'http://localhost:5000/api/' //后端主机
});
我在 Ubuntu 操作系统上使用 Chrome 网页浏览器。
在 DevTools 的 "Network" 选项卡中，当我点击请求并打开请求的 "Cookies" 选项卡时，我可以在那里看到 cookies（#screenshot1）。
但是，在 DevTools 的 "Application" 选项卡中的 "Cookies" 部分看不到 cookies（#screenshot2）。这让我感到困扰，因为我想要能够删除 cookies。
是否可以使它们在 "Application" 选项卡中可见？如果可以，如何做？
顺便说一下，当我尝试使用 Firefox 时，cookies 是可见的。
英文:
I use express app as backend.
I set cors middleware:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
app.use(cors({
credentials: true,
origin: 'http://localhost:3000' //client host
}));
<!-- end snippet -->
Here are cookie options I set:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
res.cookie(this.refreshCookieName, refreshToken, {
httpOnly: false,
path: `/api`,
sameSite: 'lax',
maxAge: accessCookieMaxAge,
secure: false
});
<!-- end snippet -->
On frontend app I make requests via axios. And, yes, I set withCredentials for instance config:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
export const apiInstance = axios.create({
withCredentials: true,
baseURL: 'http://localhost:5000/api/' //backend host
});
<!-- end snippet -->
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.
答案1
得分: 1
Chrome 刚刚更新到新版本，现在你无法看到一些 cookie，我建议你安装 cookie 管理器 或类似的扩展程序。
那就是我所做的。
英文:
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.
答案2
得分: 0
不确定为什么 Chrome DevTools 不显示具有路径属性值的 cookie，而该值未包含在当前浏览器 URL 中。也许这种 Chrome 行为的目的是让开发人员看到哪些 cookie 将确切地在当前浏览器 URL 上发送和接收。我不知道... 但当我将 cookie 从路径='/api'（我的前端应用程序中没有路径为/api的页面）更改为路径='/'（后端），Chrome 开始在 DevTools 的 "Application" 选项卡中显示 cookie。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论