Cookie 未使用 Reactjs + Node + Express + Nginx 设置答案

【问题标题】：Cookie not set with Reactjs + Node + Express + NginxCookie 未使用 Reactjs + Node + Express + Nginx 设置
【发布时间】：2022-06-18 14:48:10
【问题描述】：

我正在使用 Chrome（开发窗口）检查 cookie，但当我的 React 应用程序在生产环境（https）中登录时没有发送。阅读并尝试了这个post，但仍然没有 cookie。

使用 express-session 的 Node/express api 应用程序：

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
        },
    })
);

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;
 }

Nginx 托管的 React 应用及其配置：

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
}

React 应用使用 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保存在服务器中还是将cookie从客户端发送到服务器？
不，我没有尝试在服务器中保存 cookie。 sessionStore 已经将“cookie”存储在 DB/mysql 服务器中。我也没有从客户端发送cookie。我认为通过设置 withCredentials: true 会将 cookie 发送到服务器。

标签： reactjs express nginx express-session

【解决方案1】：

亲爱的 Yanir 和任何有兴趣了解的人，以下是适合我的方法：

let sess = {
    secret: "...",
    proxy: true,
    cookie: {},
    store: sessionStore   // refer how to use express-session 1.17.3
}

const app = express();
app.use(
  cors({
    origin: [
      'http://localhost:3000',
      'https://example.org'
    ],
    credentials: true
  })
);

app.set('trust proxy', 1);
sess.cookie.secure = true;
app.use(session(sess));

奇怪的是，（如果你比较我以前的帖子）通过删除以下内容它可以工作：

resave: false,
saveUninitialized: true,

我现在接受了，但仍然想知道为什么。我想我必须深入研究手册！

【讨论】：