在 API 获取期间总是收到此 CORS 错误答案

【问题标题】：Always getting this CORS error during API fetching在 API 获取期间总是收到此 CORS 错误
【发布时间】：2021-01-14 15:48:41
【问题描述】：

我正在尝试使用 Axios 获取数据，（网址：http://3.134.99.170:4000/upcomingMovies）

我总是收到此错误：（CORS 策略已阻止从源“http://localhost:9000”访问“http://3.134.99.170:4000/upcomingMovies”处的 XMLHttpRequest：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。）

我也尝试过使用 fetch 和 superagent，但又出现了同样的错误。

另外，这是我的代码：

axios({
      method: "GET",
      url: "http://3.134.99.170:4000/upcomingMovies",
      headers: {
        'Access-Control-Allow-Headers': 'Content-Type, Accept, Access-Control-Allow-Origin, Access-Control-Allow-Methods',
        'Access-Control-Allow-Origin' : '*',
        'Access-Control-Allow-Methods' : 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
        "Content-type": "application/json"
      }
    })
    .then((response) => {
      setUpcomingMovies(response)
    })
    .catch((error) => {
      console.log(error)
    })

【问题讨论】：

您必须在后端将您的前端 ip/域列入白名单。你可以在这里阅读更多关于 CORS 的信息developer.mozilla.org/en-US/docs/Web/HTTP/CORS
这个 API 是由一个研究所提供的，我相信他们可能已经使用了很多年了。这不应该是他们的第一个问题吗？
我不确定。但毫无疑问，这是后端必须允许的。您发出的任何请求都将通过 pre-flight options 请求，该请求将检查 cross-origin 标头，然后只有它会发出实际的 GET 请求。您的请求在 OPTIONS 请求中被拒绝，并引发错误提示 your domain is blocked。

标签： javascript api axios fetch

【解决方案1】：

如果您只需要运行和测试您的代码，您可以在浏览器中使用 no-cors 模式（如此处所述 Disable same origin policy in Chrome）或使用浏览器的某些扩展程序，它会关闭 cors-restricted 模式（如 https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf ) 来避免这个问题。但是，如果您需要避免生产中的问题，则需要后端支持，正如之前提到的 senthil balaji

【讨论】：

添加到 elkabelaya，您可以在本地开发的情况下使用 security rules disabled 运行 chrome 实例，而不是在您的实际浏览器中禁用。运行 chrome 实例（安全禁用版本）参考不同的操作系统 stackoverflow.com/questions/35432749/…