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

我之前也遇到过几乎一模一样的场景，本地前后端跑Cookie正常，一连云端就被拦截，核心问题其实是HTTP环境下浏览器拒绝存储Secure属性的Cookie，加上跨域时SameSite和Domain的配置细节没到位。下面是我亲测有效的解决方案：

1. 后端NestJS分环境配置Cookie #

因为本地开发是HTTP，云端是HTTPS，必须给Cookie做环境差异化配置：

• 生产环境（DigitalOcean）：

  • 设置SameSite: 'none'：跨域场景下必须用这个值，否则浏览器会阻止Cookie跨域携带
  • 强制Secure: true：SameSite=None要求必须配Secure，这是浏览器的安全规则
  • 正确设置Domain：填你后端的域名（比如api.yourdomain.com），不要设localhost，因为前端请求的是这个域名，浏览器只会把Cookie绑定到这个域名下
  • 保持HttpOnly: true：这是安全最佳实践，不要为了测试关闭它
    示例代码：

  import { CookieOptions } from 'express';
  
  export const getCookieOptions = (): CookieOptions => {
    const isProduction = process.env.NODE_ENV === 'production';
    return {
      httpOnly: true,
      secure: isProduction,
      sameSite: isProduction ? 'none' : 'lax',
      domain: isProduction ? 'api.yourdomain.com' : undefined, // 本地环境不用设domain
      maxAge: 24 * 60 * 60 * 1000, // 按需调整过期时间
    };
  };
  

  在设置Cookie的地方调用这个函数：

  res.cookie('auth_token', token, getCookieOptions());
  

• 本地开发环境：
  不用设Domain，SameSite用lax或者strict，Secure设为false，这样本地HTTP环境下浏览器能正常存储Cookie。

2. 确保后端CORS配置正确 #

带credentials的CORS不能用origin: '*'，必须指定具体的前端地址：

// NestJS main.ts
app.enableCors({
  origin: process.env.NODE_ENV === 'production'
    ? 'https://your-frontend-production-domain.com' // 生产前端域名
    : 'https://localhost:3000', // 本地前端HTTPS地址（后面会讲怎么开HTTPS）
  credentials: true,
});

3. 本地前端NextJS开启HTTPS #

这是解决问题的关键！因为本地前端默认是HTTP，而云端后端返回的Cookie带Secure: true，浏览器会拒绝在HTTP页面存储Secure Cookie。所以要把本地前端改成HTTPS：

• 最简单的方式是用NextJS的实验性HTTPS功能，修改package.json的dev命令：

  "scripts": {
    "dev": "next dev --experimental-https"
  }
  

• 启动后访问https://localhost:3000，而不是原来的HTTP地址。这时候前端是HTTPS环境，请求云端HTTPS后端时，浏览器就会接受带Secure属性的Cookie了。

如果--experimental-https不够稳定，也可以用mkcert生成本地信任的SSL证书，再配置NextJS使用证书，不过--experimental-https足够应付大部分开发场景。

4. 前端Apollo Client配置确认 #

确保Apollo Client的credentials设为include，并且请求的是后端的HTTPS地址：

// apollo/client.ts
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

const httpLink = createHttpLink({
  uri: process.env.NEXT_PUBLIC_API_URL, // 比如https://api.yourdomain.com/graphql
  credentials: 'include', // 必须设为include，才能携带Cookie
});

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
    },
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

export default client;

5. 用浏览器工具排查问题 #

如果还是不行，打开浏览器开发者工具：

• 看Console标签：浏览器会明确提示为什么拒绝Cookie，比如This set-cookie was blocked because it has the 'Secure' attribute but was not received over a secure connection，根据提示调整配置
• 看Application -> Cookies：检查有没有后端的Cookie，如果没有，结合上面的错误提示定位问题

按照这些步骤来，应该就能解决本地前端对接云端后端的跨域Cookie问题了，我当时就是这么搞定的。

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