CORS 策略：无“Access-Control-Allow-Origin”/500（内部服务器错误）问题

Question

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

cors 和 500

控制器代码

    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

不过，我从邮递员那里得到了 Status: 200 OK。 邮递员解决方案

编辑：我已经看到了 cors 问题的其他 解决方案，但解决方案没有具体说明为什么在解决 cors 问题后我得到“未定义”的结果。

原文由 tokibitsu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好吧，所以我想通了这个问题。在某种程度上，我不必处理任何 cors 的东西，因为我相信这不是问题的主要根源。

因此，与其通过“GET”访问我的数据库数据，不如通过以下方式获取数据：

 this.data = (Service.function(bodyValue)).data

我做了“POST”来获取数据，并通过简单地这样做来访问数据

const response = Service.function({
                    id: bodyValue
                })
this.data = response.data

这无需从数据库中获取“安全”信息即可访问数据，而是通过从数据库中获取 Observer 对象信息来访问数据库中的数据。

Observer 对象 如下所示，它将用户数据视为对象而不是纯数据。

与数据 对象 相比，每个数据 {…} 都有用户信息。

我不确定我是否使用了正确的词，但这些是我目前理解的范围。

原文由 tokibitsu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

（注意，你不应该把 … 放在里面，但是你可以把任何 HTTP 动词放在这个列表中）

如果您需要自己的标头（用于身份验证目的），则需要为客户端 -> 服务器添加此标头。

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

你想为 Server -> Client 添加这个

Access-Control-Expose-Headers: YourHeader,YourHeader3

请注意， OPTIONS 调用是您应该处理的完全独立的调用以及 GET 方法。

您现在已经告诉浏览器它可以请求什么，以及它可以期望从您的 API 返回什么。如果您不响应 OPTIONS 请求，浏览器将终止请求，从而导致 CORS 错误。

我将猜测一下并假设您可能正在使用 Express， 此答案 描述了如何设置标头。

标题在英文中是什么意思？

Access-Control-Allow-Origin 允许客户端从哪里访问该资源（端点）？这可以使用通配符匹配部分域，或者只是一个 * 以允许任何地方。

Access-Control-Allow-Methods 该路由允许哪些 HTTP 方法？

Access-Control-Expose-Headers 当我从服务器得到响应时，我（浏览器）应该向客户端公开什么？

Access-Control-Allow-Headers 我作为客户端允许作为标题发送的是什么？

原文由 Rachael Dawn 发布，翻译遵循 CC BY-SA 4.0 许可协议