为什么 Express 路由器会被 CORS 阻止，而路由器路由却不会？

Question

我有这个功能，我用它来保护我的路线。

export function authUser(req, res, next) {
    let token = req.cookies?.token;
    if (token) {
        jwt.verify(token, process.env.jwt_secret, (err, data) => {
            if (err) {
                res.sendStatus(403);
            } else {
                req.username = data;
                next();
            }
        });
    } else {
        res.sendStatus(403);
    }
}

这完全没问题

const authRoutes = express.Router();

authRoutes.get('/content', authUser, (req, res) => {
    res.send(`This is the content in Content.vue for ${req.username}`);
});

app.use('/a', authRoutes);

但是手动将 authUser 添加到 authRoutes 下的每个路由会很烦人。我想这样做，以便 authRoutes 中的每条路由都经过 authUser

const authRoutes = express.Router();

authRoutes.use(authUser);

authRoutes.get('/content', (req, res) => {
    res.send(`This is the content in Content.vue for ${req.username}`);
});

app.use('/a', authRoutes);

但问题是当我这样做时，我在前端收到此错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8182/a/content. (Reason: CORS preflight response did not succeed). Status code: 403.

我很困惑为什么第一种方法有效但第二种方法无效。问题是当我们到达 authUser 时，

req.cookies

中没有 cookie。

这就是cookie的设置方式

let options = {
    maxAge: 1000 * 60 * 0.25,
    httpOnly: true, // Cookie will not be exposed to client side code
    sameSite: 'none', // If client and server origins are different
    secure: true, // use with HTTPS only
};

const token = jwt.sign(req.body.identifier, process.env.jwt_secret);
res.cookie('token', token, options);
res.sendStatus(200);

这两个请求的流程不是一样吗？

authRoutes.use

在到达路线之前是否将数据发送回用户？

Answer 1

这两个设置是不同的：第一个设置仅将

authUser

中间件应用于

GET /a/content

，第二个将其应用于向/a/*发出的

每个

请求，包括CORS预检请求中使用的

OPTIONS

请求.

并且，如此处所述，“CORS 预检请求从不包含凭据”。