使用部署在 GitHub Pages 上的 React 应用程序和渲染上的 Node.js 后端在浏览器中设置和存储 Cookie 时遇到问题

Question

我目前在使用部署在 GitHub Pages 上的 React 应用程序和托管在 Render 上的 Node.js 后端时，面临着在浏览器中设置和存储 cookie 的问题。这是我遇到的设置和问题：

设置：

• 前端：部署在 GitHub Pages 上的 React 应用程序
• 后端：托管在 Render 上的 Node.js 服务器。
• 问题：如果我使用 secure:false，GitHub Pages 上的浏览器会收到后端设置的 cookie，但实际上并未设置它们。如果我使用 secure:true，cookie 根本不会到达客户端。

后端：

const express = require('express');
const mongoose = require("mongoose");
const session = require('express-session');
const bodyParser = require('body-parser');
const cors = require('cors');
const http = require('http');
const {passport} = require('./utils/auth');
const userRoutes = require('./router/users');
const roomRoutes = require('./router/rooms');
const socketEvents = require("./utils/socket");

const testHost = 'http://localhost:3000';
const prodHost = 'https://[GITHUB_PAGE]';

const isProd = process.env.NODE_ENV === 'production';

const host = isProd ? prodHost : testHost;

const app = express();
const server = http.createServer(app);
const io = require("socket.io")(server, {
    cors: {
        origin: host,
        methods: ["GET", "POST"]
    }
});
const port = process.env.PORT || 1234;
const mongoURI = '[MONGO_URL]';

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(cors({
    origin: host,
    credentials: true
}));
app.use(session({
    secret: '[SECRET]',
    resave: false,
    saveUninitialized: false,
    cookie: {
        httpOnly: true,
        secure: isProd,
        sameSite: isProd ? 'None' : 'Lax',
        domain: isProd ? '.onrender.com': "localhost",
        path: '/',
        maxAge: 1000 * 60 * 60 * 24 * 7
    }
}));
app.use(passport.initialize());
app.use(passport.session());

app.use("/api/users", userRoutes);
app.use("/api/rooms", roomRoutes);

socketEvents(io);

mongoose.connect(mongoURI, {
    useNewUrlParser: true,
    useUnifiedTopology: true
}).then(() => {
    console.log("Database connected");
    server.listen(port, () => {
        console.log(`Server is running on port ${port}`);
    });
})
    .catch((err) => {
        console.log(err);
    });

前端请求：

import axios from 'axios';

const prodHost = 'https://[RENDER_SITE].onrender.com';
const testHost = 'http://localhost:1234';

const host = process.env.REACT_APP_ENV === 'production' ? prodHost : testHost;

const API = axios.create({
    baseURL: host,
    withCredentials: true
});

github 和 Render 都使用 https，所以我不确定为什么我没有收到 cookie

Answer 1

找到了解决方案，我通过使用代理的后端进行部署，并且必须根据此答案在会话选项中设置 proxy:true：Secure CookieSession when using iisnode