反应 js 中的 api-key 请求中发生 CORS 错误答案

【问题标题】：CORS Error happens in api-key request in react js反应 js 中的 api-key 请求中发生 CORS 错误
【发布时间】：2022-01-07 04:05:51
【问题描述】：

我想获取 api_kye，我在后端使用 moqui 框架，在 react js 项目中使用 axios：

     axios.get(SERVER_URL + '/rest/api_key', {
        headers: {
            Authorization: "Basic " + btoa(username + ":" + password) ,
            'Content-Type' : 'application/x-www-form-urlencoded' ,
        },
    }).then(response => {})

然后，当请求时发生以下错误：
从源“...”访问“...”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：“Access-Control-Allow-Origin”标头具有值“ ...' 不等于提供的原点。

【问题讨论】：

那么您的服务器没有将您当前的域指定为“允许”。您是从本地主机执行此操作吗？你能控制服务器吗？
那么，您的请求的来源是什么？允许哪个来源？这两个值必须完全相同。或者您允许所有来源
当请求的 url 和窗口 url 具有不同的来源时会发生此错误。请检查两者是否相同。详情developer.mozilla.org/en-US/docs/Web/Security/…
你了解 CORS 吗？根据错误消息，它在您的后端启用但配置错误。将后端的 CORS 配置添加到您的问题中。
是的，没有问题，我可以在我的本地主机中发送请求没有任何问题，并查看我的错误并了解存在于错误的原始部分与标头不同的地址有一个值错误地址它们只是在一个“/”中不同

标签： reactjs cors

【解决方案1】：

这不是 reactJS 错误，这是您的后端代码有问题，您需要查看 Moqui 文档以了解如何允许您调用的来源访问您的 API

【讨论】：

【解决方案2】：

在服务器端启用 CORS

让我们回到服务器的 app.js 文件。

app.get('/cors', (req, res) => {
    res.set('Access-Control-Allow-Origin', '*');
    res.send({ "msg": "This has CORS enabled ?" })
});

还要检查服务器端的重定向 URL

参考this link

【讨论】：

如果您控制服务器。
如果您查看错误消息，您会看到，CORS 显然已经在服务器上启用（尽管似乎允许错误的来源）。此外，这段代码恰好为该一次调用启用了 CORS。

【解决方案3】：

当您向 API 发送 HTTP 请求时，服务器响应应在响应标头中包含您的域，否则 chrome 会引发此错误：“对 XMLhttprequest 的访问已阻止来源......”

首先确保您的域包含在服务器代码中。如果它已经包含，那么原因可能是服务器无法正确处理您的响应。也许它崩溃了，因此响应已损坏，chrome 在响应标头中找不到您的域，并引发了该错误

【讨论】：

【解决方案4】：

所以我有一个解决方案，但你可能会也可能不会构建它。

CORS 是一项安全功能，您应该通过后端而不是浏览器直接接收请求...

如果数据不敏感，并且您想在不出现 CORS 错误的情况下向世界开放端点，则可以执行以下两种操作之一

从服务器端设置 CORS 标头。您需要了解 HTTP 请求和标头。你从服务器设置这些。使用 * 启用跨源将起作用。
构建代理。我已经在 AWS API 网关中完成了这项工作，我将链接另一篇文章。效果很好。基本上，AWS 将充当您的后端，并在 CORS 被阻止的情况下接受响应。然后，您将代理请求并剥离 CORS 标头。当您调用 api 时，您实际上会调用调用 API 的 AWS，然后 AWS 将在启用 CORS 的情况下将响应传回给您。

Angular No 'Access-Control-Allow-Origin'

只需按照以下步骤操作即可。

【讨论】：

如果您查看错误消息，您会看到，CORS 显然已经在服务器上启用（尽管似乎允许错误的来源）。