如果我在前端收到跨域请求阻止错误，为什么请求似乎仍然得到处理

Question

我的印象是，跨域请求被阻止主要是为了防止恶意网站获取或更新您的网络服务上的信息。

然而，我注意到即使请求在我的前端被阻止，代码仍然在后端执行。

例如：

import express = require('express')
const app = express()
const port = 80

app.use(function (req, res, next) {
    // res.header("Access-Control-Allow-Origin", "*")
    // res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
    next()
});

app.get('/foo', (req, res) => {
    console.log("test1")
    res.json({
        data: "Hello"
    })
    console.log("test2")
})

app.listen(port, () => {
    console.log(`app listening at http://localhost:${port}`)
})

如果我的前端随后向 express 服务发出请求，请求将因cross-origin 而失败，但 express 服务仍会记录

test1
test2

由于不允许来源，是否应该 express 阻止服务继续运行？即使前端出错，如果 express 代码仍然执行，这不是安全威胁吗？

Answer 1

浏览器实现中有两种类型的 COR 请求，使用哪种取决于发出的具体请求。

对于不需要 pre-flight 的请求，向后端发出请求，然后浏览器检查生成的标头以查看是否允许 COR 请求。如果不允许（如您显示的情况），则请求的结果会被客户端阻止，因此它无法看到请求的结果（即使服务器已完全处理它）。

从您所展示的内容中我可以看出，这里的一切都按预期工作。该请求被视为“简单请求”，不需要预检。如果不是同一来源，则不允许基于浏览器的 Javascript 从此路由获取结果。

---

对于确实需要预检的请求（请求中有一个可以触发预检的事物列表），浏览器将首先通过向同一路由发送 OPTIONS 请求来询问服务器是否允许该请求。然后服务器决定是否允许该请求。如果浏览器获得了服务器的许可，那么它就会发送真正的请求。

您可以查看是什么触发了预检here。

大概浏览器不会一直使用预检，因为它的效率较低（需要双倍的请求）。