React+Node+Express+Nginx HTTPS生产环境Cookie未设置问题求助

API 探路者

2026-9-1

问题背景

通过Chrome开发者工具检查Cookie发现，部署在HTTPS生产环境的React应用完成登录流程后，对应Cookie未正常下发携带，已尝试相关公开解决方案后问题仍未解决。

现有配置

Express后端服务配置（使用express-session）

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.set('trust proxy', 1);
app.use(cors({origin: 'https://example.org', credentials: true}));
app.use(
    session({
        secret: SESSION_SECRET,
        resave: false,
        saveUninitialized: true,
        store: sessionStore,
        cookie: {
            secure: true,
            maxAge: oneDay
        },
    })
);

API服务Nginx反向代理配置

server {
    server_name example-api.org; # managed by Certbot
  
    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example-api.org/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example-api.org/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location / {
        proxy_pass http://localhost:8000/;
        proxy_http_version  1.1;
        proxy_cache_bypass  $http_upgrade;
        proxy_set_header Upgrade    $http_upgrade;
        proxy_set_header Connection “upgrade”;
        proxy_set_header Host   $host;
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_set_header X-Forwarded-Host   $host;
        proxy_set_header X-Forwarded-Port   $server_port;
 }

React前端应用Nginx配置

server {

    root /var/www/html/reactapp/;
    try_files $uri $uri/ /index.html;

    server_name example.org; # managed by Certbot

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.org/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.org/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

前端Axios请求代码

const apiClientAppLogin = async () => {
  try {
    const { data } = await axios.post<LoginFrontendAppResponse>(
      `${process.env.REACT_APP_API_URL}/login-client-app`,
      { password: process.env.REACT_APP_FRONTEND_PWD },
      {
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
        withCredentials: true,
      }
    );
    return data;
  } catch (error) {
    return null;
  }
};
export { apiClientAppLogin };

排查与修复方案

按优先级逐个排查以下问题，绝大多数同类问题都能在以下步骤中定位：

补全Cookie跨站必需属性
前后端部署在不同二级域名下（example.org和example-api.org），属于跨站请求，Chrome 80+版本默认Cookie的SameSite属性为Lax，跨站POST请求不会携带、也不会存储对应Cookie。修改express-session的cookie配置，显式声明跨站属性：

cookie: {
  secure: true,
  httpOnly: true,
  sameSite: 'none', // 跨站场景必须设置为none，且必须同时开启secure
  maxAge: oneDay,
  domain: '.example-api.org' // 显式声明Cookie作用域，避免代理后域不匹配
}

注意：SameSite=None必须搭配Secure: true使用，现有配置已开启secure，符合要求。

修复Nginx代理配置错误

现有配置中Connection头的值使用了中文引号“upgrade”，Nginx无法正确识别该配置，会导致头信息传递异常，替换为英文双引号"upgrade"。
API服务的Nginx location块中缺少Cookie透传配置，补充以下参数：

proxy_set_header Cookie $http_cookie;
proxy_cookie_domain localhost example-api.org;
proxy_cookie_path / /;

配置完成后执行nginx -t校验语法，再重载Nginx配置。

校验前端请求配置

确认打包时注入的REACT_APP_API_URL值为https://example-api.org，不能使用HTTP前缀、末尾不能带多余斜杠：HTTPS页面发起HTTP请求会被浏览器混合内容策略直接拦截，Cookie自然无法下发。
确认没有全局axios配置覆盖单请求的withCredentials: true参数，所有跨域接口请求都需要携带该参数。

浏览器侧定位拦截原因

打开Chrome开发者工具Network面板，找到登录接口请求，检查响应头中是否存在Set-Cookie字段：
- 若无Set-Cookie：问题出在Express服务层，检查session存储服务连接是否正常、登录逻辑中是否正确修改了req.session内容触发Cookie下发、trust proxy配置是否和实际代理层数匹配。
- 若有Set-Cookie但Cookie未存入浏览器：看Console面板的黄色警告，会明确标注拦截原因（常见为SameSite不合法、Secure不匹配、域不匹配）。
打开Chrome设置页，确认未开启"阻止所有第三方Cookie"选项，跨站场景下API域名的Cookie属于第三方Cookie，开启全局拦截会导致Cookie无法存储。

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