控制器代码

Question

基本上，我正在尝试通过Sequelize通过ID获取用户名。问题是我可能会因响应（状态）而陷入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

我从邮递员那里得到了一个状态：200 OK。 Postman Solution

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

Answer 1

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

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

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

（请注意，您不应在其中添加...，但可以在此列表中放置任何HTTP动词）

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

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

您要为服务器->客户端添加此

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 作为客户端，我可以作为标头发送什么？

Answer 2

好的，所以我找出了问题所在。在某种程度上，我不必处理任何cors问题，因为我认为这不是问题的主要根源。

因此，与其通过“ GET”访问我的数据库数据，而不是通过执行以下操作获取数据：

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

我执行了“ POST”来获取数据，并通过简单的操作来访问数据

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

这访问数据而不必从数据库中获取“安全”信息，而是通过从数据库中获取观察者对象信息来访问数据库中的数据。

观察者对象看起来像follows，它将用户数据视为对象而不是纯数据。

与数据object相比，其中每个数据{...}都有用户信息。

我不确定我是否使用了正确的词，但这只是我目前的理解程度。

Answer 3

如果您的来源来自本地主机，Chrome通常会阻止任何源自此来源的CORS请求。

您可以安装此扩展程序：

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

或者您可以在运行chrome时禁用安全性（添加标志）：

-disable-web-security

CORS政策：无“访问控制允许来源” / 500（内部服务器错误）问题

控制器代码

客户代码

3 个答案:

标题的英文含义是什么？