如何禁用NextJS内部重定向处理，交由浏览器执行重定向？

问题描述 #

我正在实现一套基于Cookie+魔术链接的基础认证流程，具体步骤如下：

• 访问受保护路径时，若请求里没有认证Token Cookie，就通过对应页面的getServerSideProps重定向到https://myapp.com/auth/login获取魔术链接
• 用户点击魔术链接https://myapp.com/auth/login?token=AUTH_TOKEN_VALUE进入登录页
• 在登录页的getServerSideProps中提取AUTH_TOKEN_VALUE，发送到后端API验证有效性
• 验证通过后，把Token设置成HttpOnly Cookie，然后重定向到受保护的首页https://myapp.com/

处理Cookie设置和重定向的代码如下：

export const getServerSideProps: GetServerSideProps = async (context) => {
    // 提取AUTH_TOKEN_VALUE并调用后端API验证的逻辑
    context.res.writeHead(307, {
        "Set-Cookie": // 填入包含AUTH_TOKEN_VALUE的HttpOnly Cookie配置
        Location: "https://myapp.com/"
    }).end()
    
    return  { props: {} };
}

按预期，Next.js应该给浏览器返回一个带Set-Cookie和Location头的空响应，浏览器保存Cookie后自动重定向到首页，且携带Cookie的请求能正常访问首页。但实际测试时，页面最终停留在https://myapp/auth/login，排查请求日志发现触发了三次请求：/auth/login?token=AUTH_TOKEN_VALUE → / → /auth/login，而且Cookie已经成功设置，手动输入首页地址能正常进入。

另外测试外部域名重定向时，浏览器能正常执行重定向，代码如下：

export const getServerSideProps: GetServerSideProps = async (context) => {
    // 其他业务逻辑
    context.res.writeHead(307, {
        Location: "https://example.com/?test=true"
    });

    return { props: {} };
}

一开始我以为是Next.js会检测Location头的主机名，对同域名请求做内部重定向，导致浏览器没机会携带Cookie，想知道怎么禁用这个行为，让浏览器处理重定向。

问题根源与解决方法 #

后来排查发现，问题根本不在Next.js，而是Cookie的SameSite策略设置成了strict：
当用户从Gmail这类外部站点点击魔术链接进入时，浏览器会因为SameSite=strict的限制，在重定向到首页的请求里不携带刚设置的认证Cookie，首页检测不到Cookie就又重定向回登录页。而直接粘贴链接测试时，请求属于同站点上下文，Cookie能正常携带，所以一切正常。

解决方案 #

调整Cookie的SameSite属性：

• 推荐设置为Lax：Lax允许从外部站点导航到当前站点的GET请求携带Cookie，既保证了大部分场景的安全性，又能兼容魔术链接这种登录场景
• 如果需要支持跨站POST请求携带Cookie，可以设置为None，但必须同时加上Secure属性，确保Cookie仅通过HTTPS传输

修改后的Cookie设置示例：

export const getServerSideProps: GetServerSideProps = async (context) => {
    // 提取AUTH_TOKEN_VALUE并验证的逻辑
    const authToken = AUTH_TOKEN_VALUE; // 替换为实际获取的Token
    context.res.writeHead(307, {
        "Set-Cookie": `auth-token=${authToken}; HttpOnly; Secure; SameSite=Lax; Path=/`,
        Location: "https://myapp.com/"
    }).end()
    
    return  { props: {} };
}

内容的提问来源于stack exchange，提问作者the thinker