跨域请求被阻止：同源策略不允许读取远程资源。 （原因：CORS预检响应没有成功）

Question

服务器端

// Set Headers
    app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, authorization, Verification");
        next();
    });

app.use('/user', authMiddleware.authenticateToken, userRoutes);

客户端

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

我不知道为什么会发生这种情况。如果我删除 authMiddleware，则一切正常。

答案： 我认为问题在于我使用了 USE 而不是特定的路线。当我将中间件添加到路由时，它工作正常。我以为我可以使用 USE 添加中间件，但这不起作用。

Answer 1

您也应该允许 OPTIONS 方法。请求的预检包括一个带有方法 OPTIONS 的请求，您应该使用完整的标头和空的正文回复它。 还要检查您的中间件是否没有在身份验证时抛出异常。

Answer 2

当浏览器遇到跨域 AJAX 调用时，它必须确定端点是否理解 CORS 协议以及可接受的域/方法/标头是什么。为此，他们将在 OPTIONS 方法中触发预检请求。 https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

然而，并非所有 AJAX 调用都会触发此类预检请求。例如，如果你只是直接调用

fetch('https://google.com/some_api')

本质上是向 https://google.com/some_api 发起不带参数的 GET 调用，浏览器可能会选择跳过预检而只触发实际的 GET 调用。