如何禁用 NextJS 的内部重定向处理并让浏览器处理它?
我正在为基本的 cookie/magic link 身份验证编写一个玩具示例。
流程是这样的:
- 如果在向受保护路径发送请求时请求中缺少身份验证令牌 cookie,则在这些路径的
内,它将它们重定向到getServerSideProps
,在那里他们可以请求一个魔法链接 - 点击魔法链接
- 在登录页面
内,我从查询参数中提取getServerSideProps
并将其发送到API服务器以检查它是否有效AUTH_TOKEN_VALUE
- 如果是,则在响应中将其设置为HttpOnly cookie并重定向到主页
,受保护的路径/
处理设置 cookie 和重定向的代码部分如下所示:
export const getServerSideProps: GetServerSideProps = async (context) => {
// code extracting AUTH_TOKEN_VALUE and sending it to backend API
context.res.writeHead(307, {
"Set-Cookie": // the HTTP only cookie containing AUTH_TOKEN_VALUE,
Location: "/"
}).end()
return { props: {} };
}
理想情况下,这将导致 NextJS 应用程序向浏览器发送一个仅包含这两个标头的空响应。浏览器会接收并保存 auth cookie,然后重定向到
/
。重定向的请求现在将具有 auth cookie 并成功转到/
.
奇怪的是,然而,当我测试它时,我最终到达的页面是
https://myapp/auth/login
。我做的第一件事是检查重定向是否发生(通过控制台登录相应页面的getServerSideProps
),果然,它确实发生了。它首先到达/auth/login?token=AUTH_TOKEN_VALUE
端点,然后是/
端点,然后是/auth/login
端点。
接下来我做的是检查是否设置了 cookie,果然是(我检查了 DevTools 的应用程序选项卡)。事实上,如果我随后手动导航到
/
,它不会将我重定向回/auth/login
,因为我有身份验证cookie。
我还测试了浏览器端重定向是否可以以这种方式完成,果然可以。
在
getServerSideProps
内运行以下代码时:
export const getServerSideProps: GetServerSideProps = async (context) => {
// other code
context.res.writeHead(307, {
Location: "/?test=true"
});
return { props: {} };
}
事实上,它确实在浏览器端将我重定向到
/?test=true
。这向我建议 NextJS 检查它是否可以执行内部重定向(可能通过检查 Location
标头的主机名),如果可以,它会执行。
有没有办法禁用此行为并让浏览器进行重定向?因为对于我的应用程序,我需要浏览器进行重定向,否则重定向请求中不会有我需要的身份验证 cookie。
更新:
看来我的问题与 NextJS 无关,而是 cookie 政策。我把我的饼干设置为
SameSite=strict
。这意味着无论何时我点击来自 Gmail 的链接,都不会发送身份验证 cookie。当我通过直接粘贴链接对其进行测试时,一切都按照我的预期进行。
回答如下:
根据更新,这个问题与 NextJS 无关,而是与 cookie 策略有关。我把我的饼干设置为
SameSite=strict
。
这意味着每当我点击来自 Gmail 的链接时,身份验证 cookie 都会设置但不会与重定向请求一起发送。当我通过直接粘贴链接对其进行测试时,一切都按照我的预期进行。