Javascript CORS冲突是否可以通过修改fetch解决？

我在尝试使用fetchapi从现有资源页面检索地震数据的JSON数据资源时，遇到了一个问题，可能会被绊倒，可能会消耗太多的脑力

首先，我试图解决的任务是完成面试评估，然而，我没想到在编写的第一段代码中开始评估后不久，我在这方面的努力就会受阻：获取要解析、操作的JSON数据结构，并在由CreateReact应用程序构建的应用程序中呈现

提取是在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问题的可能解决方案时，我读到了一些类似这样的东西：除非您能够访问源服务器代码本身，否则无法解决这个问题；我试图检索的JSON对象的主体可以通过这种方法获得，但仍然没有成功

也许我只是对在这种情况下如何使用Fetch没有足够的理解。我想做的是尝试调查问题，让失败的获取请求至少向控制台报告有关资源头的一些信息，这清楚地表明请求的资源上没有“Access Control Allow Origin”头。，但也许我只需要在资源页面上检查控制台中的网络窗格即可：

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

我对每个Response and Request Headers报告中报告的这些信息感到困惑，我只知道在异步请求数据方面有更多经验的人会指出，在解决CORS冲突时，对他们来说什么是显而易见的。我在上述代码中解决CORS问题的最新尝试是在传递到fetch的options对象中包含凭据。在阅读MDN的文章时，我想到了这个想法。据我所知，如果在发出请求时遇到这种类型的身份验证配置，MDN的文章将包含相应的cookie。有一个长长的、抽象的集合？在资源的“请求标头”报告中添加了个cookie值，但尝试在我的获取请求中包含我认为是传递所需cookie的必要手段的内容被证明是不成功的

在我对这个问题的研究中，我没有发现太多与我的场景相关的东西，这将表明解决CORS问题的好方法。我觉得很迷茫，真的需要一些指导。也许有人可以指出一个好的资源来处理许多不同的获取操作，因为作为一个自学成才的人，到目前为止我查阅了很多web资源：MDN、论坛、，中型文章不允许我清楚地拼凑出如何通过对获取请求进行适当的修改来规避CORS策略

有什么想法吗

---

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

如果是生产问题，您应该调整服务器端的响应头 如果只是为了发展的目的。您正在使用webpack devserver并尝试将api连接到登台环境等，您可以： 一个调整CORS标题的get浏览器扩展-它们将其更改为访问控制允许原点：*

---

b为chrome启动带有适当启动参数的浏览器请参见：-禁用web安全

如果可以使用页面上的代码解决CORS问题，这将代表一个巨大的安全问题，修复程序将很快得到修补。你说这是为了面试；他们提供了这种资源吗？你认为他们希望你在CORS附近工作吗？或者您可以使用不同的数据源来允许跨源请求？如果您想要使用此资源，您可能需要一个代理，请查看此服务：浏览器插件可以做任何他们想做的事情，就像您决定在自己的计算机上运行的任何其他代码一样。但在客户端web代码的上下文中，浏览器严格执行CORS。我不确定这是否是解决方案的线索，或者是否存在一些更明显、更“内置”的解决方案，以防不清楚，CORS是一种安全功能，因此web浏览器中的JavaScript无法解决它。您需要一个服务器来配合原始服务器，或者

---

r代理…如果您使用webpack dev server，您可以将其配置为代理API服务器，但并不总是这样，如果您从服务器获取的configurationfetched中获取端点，并且您的所有api请求都已经存在：/*在这种情况下，devserver proxy不会帮助您，而且从我所看到的情况来看，他的请求不会发送到localhost，而是直接发送到其他所有情况下的某个服务器。是的，使用proxy是一个很好的解决方案：是的，可能会更难。在这种情况下，Fiddler会有所帮助。从技术上讲，我们也可以使用http代理并修改响应/请求以更改端点（如果不是在客户端硬编码，而是meh）。。我认为，在这种情况下，这将是一种过分的做法：是的，完全同意