在 fetch api 中启用 CORS [重复]答案

【问题标题】：Enable CORS in fetch api [duplicate]在 fetch api 中启用 CORS [重复]
【发布时间】：2018-12-03 16:31:28
【问题描述】：

我收到以下无法继续的错误消息

无法加载https://site/data.json：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin” 请求的资源上存在标头。起源 'http://localhost:8080' 因此不允许访问。如果一个不透明响应满足您的需求，将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。 localhost/:1 Uncaught (in promise) TypeError: Failed to fetch

我正在尝试在我的 react js 文件中启用CORS，但我无法获得预期的结果。我已经安装了一个 chrome 扩展，它可以工作。但是要在生产站点中使用它，我需要在我的代码中启用它。我应该如何正确安排代码以启用CORS。

fetch(URL, {
  mode: 'cors',
  headers: {
    'Access-Control-Allow-Origin':'*'
  }
})
  .then(response => response.json())
  .then(data => {

【问题讨论】：

CORS 必须在服务器端处理。
Access-Control-Allow-Origin 应该是响应头，客户端请求是无效
我认为CORS也可以在客户端启用。
hm，所以对于上面的错误消息，根据发布的链接，似乎Access-Control-Allow-Origin 必须从https://site/: 启用，而不是在我的http://localhost:8080 中启用。如果我理解它的简单性。
您使用了哪个 Chrome 扩展程序？ chrome.google.com/webstore/detail/moesif-origin-cors-change/…这个？

标签： javascript reactjs fetch-api

【解决方案1】：

浏览器在客户端具有跨域安全性，可验证服务器是否允许从您的域中获取数据。如果Access-Control-Allow-Origin 在响应标头中不可用，浏览器不允许在您的 JavaScript 代码中使用响应并在网络级别引发异常。您需要在服务器端配置cors。

您可以使用mode: 'cors' 获取请求。在这种情况下浏览器不会抛出跨域执行，但是浏览器不会在你的javascript函数中给出响应。

因此，在这两种情况下，您都需要在服务器中配置cors，或者您需要使用自定义代理服务器。

【讨论】：

如果我想抓取 Google 结果怎么办？比如，我想从我的客户端代码中请求https://www.google.com 并解析结果。可能吗？我遇到了和他一样的错误。这是否意味着 google.com 不允许对其主搜索页面的 CORS 请求？谢谢。
如果您想获取任何其他服务器（如 google 或 facebook）并且该服务器不提供访问权限，您可能需要一个服务器来处理此问题。在服务器中，您可以从 google 获取响应并发送回客户端。
我认为是一个错字，它是 no-cors 返回一个不透明的响应，请参阅 stackoverflow.com/a/43268098/6324591