如果我的前端出现跨源请求被阻止的错误，为什么请求似乎仍然得到处理

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 代码仍然执行，这不是安全威胁吗？

Answer 1

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

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

据我所知，从你展示的内容来看，这里的一切都按预期工作。该请求被视为“简单请求”，不需要预检。 Browser-based 如果来源不同，Javascript 将不允许从此路线获取结果。

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

您可以查看触发预检的内容 here。

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

如果我的前端出现跨源请求被阻止的错误，为什么请求似乎仍然得到处理

If I get a cross-origin-request-blocked error on my front-end, why does the request still seem to get processed

express

cross-domain