Next.js子路由跳转后Cookie读取为空的原因排查

核心匹配逻辑 #

浏览器发送请求时，只会携带满足路径前缀匹配的Cookie：只有请求URL的路径完全包含Cookie的path作为前缀，才会携带该Cookie。举个例子：

• 若Cookie的path是/webview/report，则只有/webview/report、/webview/report/xxx这类路径的请求会带上它；
• /webview/graph的路径前缀是/webview/graph，和/webview/report没有包含关系，因此不会携带这个Cookie。

你的场景问题根源 #

在/webview/report页面的getServerSideProps中设置Cookie时，Next.js默认会把Cookie的path设为当前页面的路由路径，也就是/webview/report，而不是父级的/webview。

• 当你跳转到/webview/graph时，浏览器不会把这个Cookie带到该页面的服务器请求里；
• 当你通过router.back()或router.push()返回/webview/report时，如果触发了getServerSideProps重新执行（比如页面需要拉取新的服务器数据），理论上能读到Cookie，但如果你的问题是在/webview/graph页面的getServerSideProps里读不到，这完全符合路径规则——因为/webview/graph不匹配Cookie的path；
• 把path改成/后，所有路径的请求都会携带这个Cookie，自然解决了问题。

额外建议 #

如果只需要让Cookie在/webview下的所有子路由可用，不用直接设为根路径/，显式指定path: "/webview"即可，既能满足需求，又能避免Cookie被其他无关路径访问。

内容的提问来源于stack exchange，提问作者Chanwoo Park