React - axios - 被 CORS 政策阻止。如何解除封锁

Question

我正在运行一个简单的 API 请求，将数据返回到我编写的一个简单的 API 搜索中。我说这是简单的 API 调用，因为不需要身份验证，我可以非常简单地在 python 中完成。

但是，我在 React 中使用 Axios 时遇到了问题。

代码：

 axios.get('https://www.keyforgegame.com/api/decks/59554ab7-b414-4220-8514-408a0dbf572d')

我试过看这里，每个人都让它听起来很简单，但我似乎什么也做不了。我试过了。

axios.get('https://www.keyforgegame.com/api/decks/59554ab7-b414-4220-8514-408a0dbf572d', { crossDomain: true })

和

axios.get('https://www.keyforgegame.com/api/decks/59554ab7-b414-4220-8514-408a0dbf572d, {
        headers: {
          'Access-Control-Allow-Origin': true,
        },
        })

但我不断收到类似的错误 Access to XMLHttpRequest at 'https://www.keyforgegame.com/api/decks/59554ab7-b414-4220-8514-408a0dbf572d' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

或者

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我是否需要在标题中放一些东西才能完成这项工作？或者这是我需要做出反应的某种设置。

帮助！

Answer 1

您只是无法从客户端覆盖 CORS 检查。就是不能。CORS 是安全功能，如果仅仅禁用它是没有意义的。

有不同的方法。

1. 看你的话

   我说这是简单的 API 调用，因为不需要身份验证，我可以非常简单地在 python 中完成。

   我相信您只需要确保不发送额外的标头，这样就CORS 的含义来说request 就会变得简单。在 axios 站点上，我找到了几种方法来删除特定请求的任何额外标头：

   一种。要么通过明确指定headers

   湾 或者通过创建不同的 axios 实例，您不会提供授权标头或任何强制运行 CORS 的实例

2. 使代理在您的域上运行

3. 使后端将您的域列入白名单，并将其列在Access-Control-Allow- Origin响应标头中