Cookie、获取、表达、会话未在 Chrome 中持续存在

Question

我已经阅读了上百篇关于这个主题的讨论。我有静态 html 文件和 nodeJS 服务器在本地运行。现在我用 live-server 运行 html 文件。我正在使用 fetch 函数来检查用户是否经过身份验证。示例如下：

const checkUser = async () => {
    const url = 'http://localhost:3000/user/check_user'

    try {
        const resp = await fetch(url, {
            method: 'GET',
            credentials: 'include',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })

        if (resp.ok) {
            const json = await resp.json()
            return json
        } else {
            console.log("HTTP-Error: " + resp.status)
            return await resp.json()
        }

    } catch (e) {
        console.log(e)
    }
}

这是服务器处理它的示例：

router.get('/check_user', user_controller.check_user);

exports.check_user = async (req, res) => {
    // console.log(req.session)
    res.json({
        error: null,
        data: {
            message: "Check user",
            userID: req.session.userID ? req.session.userID : null
        },
    });
};

这是服务器配置：

app.disable('x-powered-by');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// sessions
app.use(cookieParser());
app.use(session({
    // TODO: change secret
    secret: 'my-secret',
    resave: false,
    saveUninitialized: false,
    store: MongoStore.create({
        mongoUrl: dev_db_url,
        // touchAfter: 12 * 3600 // twice a day
    }),
    cookie: {
        // TODO: change
        secure: true,
        sameSite: 'none',
        maxAge: 14 * 24 * 60 * 60 // 14 days
    }
}));
app.use(cors({
    origin: 'http://localhost:8080',
    methods: ['GET','POST'],
    credentials: true // enable set cookie
}));
app.use((req, res, next) => {
    // res.header("Access-Control-Allow-Origin", "http://localhost:8080");
    // res.header("Access-Control-Allow-Credentials", true);
    // res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, authorization");
    // res.header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS');
    // Example to check visits. Works in Firefox but not in Chrome
    try {
        req.session.visits = req.session.visits ? req.session.visits + 1 : 1;
        console.log('req.session.visits: ', req.session.visits);
        return next();
    } catch (err) {
        return next(err);
    }
});

// routes
app.use('/user', userRouter);

// This native get thing is working in Chrome
// app.get('/', function(req, res){
//     if(req.session.page_views){
//         req.session.page_views++;
//         res.send("You visited this page " + req.session.page_views + " times");
//     } else {
//         req.session.page_views = 1;
//         res.send("Welcome to this page for the first time!");
//     }
// });

let port = 3000;

app.listen(port, () => {
    console.log('The server is running on port number ' + port);
});

我尝试将 sameSite 设置为 true，禁用和启用 cors 模块，使用和不使用 cors 标志运行 live-server，更改 app.use 函数的顺序。如果有人提出建议，我将不胜感激。示例在 Firefox 中运行良好，用户身份验证也是如此。我不想启动带有一些标志的 chrome，每个用户都应该能够使用我的应用程序。它如何对其他人起作用？看起来我错过了一些重要且非常愚蠢的东西。

如果不通过简单的获取服务器进行获取，它也适用于 Chrome。但我想保持结构不变（不使用 get('/') 和渲染函数）

谢谢，祝你有美好的一天:)

Answer 1

https://medium.com/swlh/how-the-new-chrome-80-cookie-rule-samesite-none-secure-affects-web-development-c06380220ced#2410 -- SSL 和 https 用于 localhost 或 sameSite: 'Lax' 应该会有所帮助