可以通过修改后的 fetch 解决 CORS 冲突吗？ [复制]

Question

由于尝试使用 Fetch API 从现有资源页面检索 JSON 数据资源（地震数据）的问题，我感到非常困惑，并且可能消耗了太多脑力。

首先，我在这里尝试解决的任务是完成面试评估，但是，我没想到在编写的第一个代码中开始评估后不久我的努力就会受挫：获取一个 JSON 数据结构，以便在由 Create-React-App 构建的应用程序中进行解析、操作和呈现。

在主要用于检索和解析数据的组件内的 componentDidMount 生命周期内进行提取：

componentDidMount() {
  fetch('http://sitetest.test.com/seismic/data.json', {
    credentials: 'include',
  })
    .then(response => {
      console.log(response);
      response.json();
    })
    .then(earthquakes => {
      this.setState({ earthquakes });
    })
    .catch(error => {
      console.log('====failure====');
      console.log(error);
    });
}

最简单的获取请求会导致向控制台报告 CORS 冲突：

我花了很多时间阅读为什么报告了 CORS 冲突。最终，我阅读的解释归结为错误输出中报告的内容，即：

“请求的资源上没有 'Access-Control-Allow-Origin' 标头。”

在我研究了解决 CORS 问题的可能解决方案时，我读到了诸如“除非您有权访问源服务器代码本身，否则无法解决此问题”here，即 JSON 的主体我正在尝试检索的对象可以通过setting up a proxy 获取（使用此方法仍然没有成功）。

也许我只是对在这种情况下如何使用 Fetch 没有足够的了解。我想做的是尝试通过让我失败的获取请求至少向控制台报告一些有关资源标头的信息来调查问题，这些信息明确显示 "No 'Access-Control-Allow-Origin' 标头存在于请求的资源上。”，但也许我应该对在资源页面上检查控制台中的网络窗格感到满意：

右键单击以在单独的选项卡中查看此图像

对每个响应和请求标头报告中报告的信息感到困惑，我只知道在对数据进行异步请求方面有更多经验的人会指出在解决 CORS 冲突时对他们来说显而易见的事情。我在上面的代码中解决 CORS 问题的最新尝试是在传递给 fetch 的选项对象中包含 credentials。这个想法是在阅读 MDN 在Using Fetch 上的文章时想到的，据我了解，如果在发出请求时遇到这种类型的身份验证配置，它将包含适当的 cookie。资源的请求标头报告中有一个很长的抽象（集合？）cookie 值，但尝试包含我认为在我的获取请求中传递所需 cookie 的必要方法已被证明是不成功的。

在我对这个问题的研究中，我没有发现太多与我的场景相关的内容，这表明解决 CORS 问题的好方法。我感到很失落，真的可以使用一些指导。也许有人可以指出一个很好的资源来处理许多不同的 fetch 操作，因为作为一个基本上是自学成才的人，到目前为止我咨询过的很多网络资源：MDN、论坛、Medium 文章都没有t 让我清楚地拼凑出如何使用适当的修饰符来规避 CORS 政策。

有什么想法吗？

期待从这里继续前进，因为此任务的其余部分涉及在 React 应用程序内部传递数据，我觉得我有足够的经验来克服。

Answer 1

如果是生产问题 - 您应该调整响应标头（在服务器端）
如果仅用于开发目的（例如，您正在使用 webpack-devserver 并尝试将 api 连接到暂存环境等），您可以：
a) 获取调整 CORS 标头的浏览器扩展 (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) - 他们将它们更改为 Access-Control-Allow-Origin: "*"
b) 使用适当的启动参数启动浏览器（对于 chrome，请参阅 https://peter.sh/experiments/chromium-command-line-switches/）：--disable-web-security