javascript - CORS 政策 : No 'Access-Control-Allow-Origin' /500 (Internal Server Error) Problem

Question

基本上，我试图通过 id 从 Sequelize 获取用户名。问题是我要么遇到 CORS 问题，要么遇到 500 内部服务器错误，具体取决于响应(状态)

cors and 500

Controller 代码

    async getUserFromUserId (req, res) {
        try {
            // const user = await User.findByPk(req.body.id)
            const id = req.body.id
            const user = await User.findByPk(id)
            res.send(user.username)
            } catch (err) {

            // or res.status(some random number).send() for CORS problem to appear

            res.status(500).send({
                error: 'an error has occured trying to fetch the users id'
            })
        }
    },

客户代码

this.notifiedUser = (await UserService.getUserFromUserId({id: UserId})).data

我从 postman 那里得到了一个状态:200 OK。
Postman Solution

编辑:
我已经看到 cors 的其他 Solution 是如何处理的，但是解决方案没有说明为什么在解决 cors 问题后我得到“未定义”的结果。

Answer 1

因此，CORS 在这方面实际上非常令人讨厌，但是有一种相当简单的方法可以解决此问题。这是一个 super 有用的安全功能，尽管有时充其量令人沮丧。

您的浏览器执行所谓的预检请求，它是 http 动词 OPTIONS 。您的浏览器会调用您想要的任何路由，但不是您要求它执行的操作，而是首先使用 OPTIONS 进行调用。您的服务器应该接受客户端可以使用 OPTIONS 方法请求的所有路由，并且您的服务器应该使用以下 header 作为外部可用的跨域 API 进行响应。

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, ...

(注意，您不应将 ... 放入，但您可以将任何 HTTP 动词放入此列表中)

如果您需要自己的 header (用于身份验证)，您需要为客户端 -> 服务器添加此 header 。

Access-Control-Allow-Headers: YourHeader, YourHeader2, YourHeader3

您想为 Server -> Client 添加这个

Access-Control-Expose-Headers: YourHeader,YourHeader3

请注意，OPTIONS 调用是一个完全独立的调用，您应该像 GET 方法一样处理它。

你现在已经告诉浏览器它可以请求什么，以及它可以从你的 API 得到什么。如果不响应 OPTIONS 请求，浏览器会终止该请求，从而导致 CORS 错误。

我将猜测一下，并假设您可能使用 Express，其中 this answer 描述了如何设置标题。

英文标题是什么意思？
Access-Control-Allow-Origin允许客户端从何处访问此资源(端点)？这可以将部分域与通配符匹配，或者只是一个 * 以允许任何地方。
Access-Control-Allow-Methods此路由允许使用哪些 HTTP 方法？
Access-Control-Expose-Headers当我从服务器得到响应时，我(浏览器)应该向客户端公开什么？
Access-Control-Allow-Headers作为客户端，我可以作为 header 发送什么？