最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

如何禁用 NextJS 的内部重定向处理并让浏览器处理它?

网站源码admin47浏览0评论

如何禁用 NextJS 的内部重定向处理并让浏览器处理它?

如何禁用 NextJS 的内部重定向处理并让浏览器处理它?

我正在为基本的 cookie/magic link 身份验证编写一个玩具示例。

流程是这样的:

  1. 如果在向受保护路径发送请求时请求中缺少身份验证令牌 cookie,则在这些路径的
    getServerSideProps
    内,它将它们重定向到
    ,在那里他们可以请求一个魔法链接
  2. 点击魔法链接
  3. 在登录页面
    getServerSideProps
    内,我从查询参数中提取
    AUTH_TOKEN_VALUE
    并将其发送到API服务器以检查它是否有效
  4. 如果是,则在响应中将其设置为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 都会设置但不会与重定向请求一起发送。当我通过直接粘贴链接对其进行测试时,一切都按照我的预期进行。

发布评论

评论列表(0)

  1. 暂无评论