NextJS 13跨域场景下服务端无法获取Cookie的解决方案咨询

1. NextJS代理转发（推荐） #

通过NextJS的rewrites配置，将前端对后端的请求代理到前端域名的子路径下，让后端的Cookie设置请求看起来是同域请求，浏览器就会允许设置前端域名的Cookie，服务端组件就能正常获取。

在next.config.js中添加如下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://1.1.1.1/:path*', // 替换为你的后端实际域名
      },
    ];
  },
};

module.exports = nextConfig;

之后前端所有后端请求都改为调用/api/xxx（比如登录请求/api/auth/login），后端设置Cookie时将Domain设为前端域名2.2.2.2，浏览器就不会拦截这个Cookie，服务端组件通过cookies()就能正常获取。

2. 基于服务器会话的认证 #

前端登录成功后，从后端获取JWT或其他认证凭证，然后调用NextJS的API路由，将凭证存储到NextJS服务器的会话中（比如使用iron-session库），服务端组件直接从会话中读取认证信息，无需依赖跨域Cookie。

示例步骤：

• 前端登录请求后端，拿到JWT
• 前端调用/api/save-session，将JWT传递给NextJS API路由
• API路由使用iron-session将JWT存入服务器会话
• 服务端组件通过getIronSession获取会话中的认证信息

3. 跨域Cookie的服务端转发（不推荐，仅临时方案） #

如果无法使用代理，可在前端将后端的Cookie值通过请求头传递给NextJS的API路由，再由API路由将Cookie转发给后端，但这种方式需要手动处理Cookie的有效期、CSRF防护等问题，容易出现安全漏洞。

• Cookie Domain规则：浏览器只会将Cookie发送到与Cookie的Domain匹配（或为其父域名）的服务器。你的后端CookieDomain设为1.1.1.1，只有请求1.1.1.1时才会携带，NextJS服务端组件运行在2.2.2.2的服务器上，无法直接获取客户端存储的1.1.1.1域名Cookie。
• 跨域Cookie设置限制：浏览器的同源策略禁止跨域服务器直接设置非父域名的Cookie，所以你之前尝试将CookieDomain设为2.2.2.2会被拦截，只有当请求来自2.2.2.2（如通过代理）时，后端才能合法设置该域名的Cookie。
• CSRF防护注意事项：跨域或代理场景下，需确保PayloadCMS的CSRF防护正常工作。通常Payload会设置XSRF-TOKEN Cookie，前端请求时需将该值放入X-XSRF-TOKEN请求头中，避免被CSRF拦截。

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