跨域Cookie设置问题：NextJS本地对接DigitalOcean部署的NestJS后端

API 探路者

2026-5-11

嗨，我来帮你搞定这个Next.js本地开发对接云端NestJS时的跨域Cookie问题，我之前也遇到过类似的场景，给你几个可行的解决方案：

解决方案1：给本地Next.js启用HTTPS

核心问题在于：当你把Cookie的SameSite设为None时，浏览器强制要求Secure=true（Cookie只能通过HTTPS传输），但你的本地前端默认是HTTP，这就直接导致Cookie被拦截。让本地前端跑在HTTPS上就能解决这个矛盾：

首先用mkcert生成本地信任的SSL证书（避免浏览器弹出不安全提示）：
1. 安装mkcert后，在项目根目录执行：mkcert localhost 127.0.0.1 ::1，会生成localhost.pem和localhost-key.pem两个文件
2. 修改Next.js的配置文件next.config.js，启用HTTPS：
```
const fs = require('fs');
const path = require('path');

module.exports = {
  serverOptions: {
    key: fs.readFileSync(path.join(__dirname, 'localhost-key.pem')),
    cert: fs.readFileSync(path.join(__dirname, 'localhost.pem')),
  },
};
```

然后调整云端NestJS的Cookie设置：

// NestJS中设置Cookie的代码示例
res.cookie('auth_token', yourToken, {
  httpOnly: true,
  secure: true,
  sameSite: 'none',
  domain: '.your-cloud-domain.com', // 注意加前缀点，适配所有子域名
  maxAge: 24 * 60 * 60 * 1000, // 根据你的需求设置有效期
});

启动本地前端后，访问https://localhost:3000，此时浏览器会认为请求满足HTTPS要求，就能正常保存Cookie了。

解决方案2：配置本地反向代理，伪装同域请求

如果你不想折腾本地HTTPS，还可以通过代理让前端的API请求看起来是同域的，这样就不需要依赖SameSite=None了：

在Next.js的next.config.js中配置rewrites规则，把前端的API请求代理到云端后端：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://your-cloud-domain.com/api/:path*', // 替换成你的云端后端地址
      },
    ];
  },
};

修改前端Apollo的配置，把请求URI改成本地代理路径：

const client = new ApolloClient({
  uri: '/api/graphql', // 不再直接写云端地址
  credentials: 'include',
  // 其他原有配置...
});

调整云端NestJS的CORS配置，允许你的本地前端地址作为origin：
```
// NestJS的main.ts中配置CORS
app.enableCors({
  origin: 'http://localhost:3000', // 本地前端的地址，HTTP也可以
  credentials: true,
});
```
这种方式下，浏览器会认为请求是同域的，Cookie的SameSite设为Lax甚至Strict都可以，而且不需要Secure=true（本地HTTP场景），Cookie就能正常保存。

额外排查点

打开浏览器开发者工具，切换到Application标签，查看Cookie列表，如果Cookie被标记为“被拦截”，可以看Console里的具体警告信息，通常会明确指出是哪个参数不符合要求（比如Secure未设置、SameSite不正确等）
云端后端的Cookie domain不要设为localhost，应该设为你的云端域名（比如.your-domain.com或者api.your-domain.com），否则浏览器会拒绝保存跨域Cookie

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