CORS 错误，但无论如何都会获取数据

Question

我有一个生成的 React 站点，我托管在 S3 存储桶中。我的一个组件在加载时尝试获取一些东西：

require('isomorphic-fetch')
...

componentDidMount() {
  fetch(`${url}`)
    .then(res => {
      console.log(res);
      this.setState({
        users: res
      })
    })
    .catch(e => {
      // do nothing
    })
}

在url我取是AWS API网关。我通过下拉菜单在那里启用了 CORS，对默认配置没有任何更改。

在我的控制台中，对于远程站点和开发过程中的本地站点，我看到：

“加载失败url：请求的资源上不存在‘Access-Control-Allow-Origin’标头。” 等等

但是，在 Chrome 网络选项卡中，我可以看到请求和响应，状态为 200 等。但是，在控制台中， myconsole.log和this.setState永远不会被调用。

我知道 CORS 是一个常见的痛点，很多问题都涉及到 CORS。我的问题：为什么响应在“网络”选项卡中没有显示错误，而同时在控制台中出现错误？

Answer 1

该fetch(`${url}`)调用返回一个使用Response对象解析的承诺，该Response对象提供使用文本、JSON 数据或 a解析的方法。Blob

所以要得到你想要的数据，你需要做这样的事情：

componentDidMount() {
  fetch(`${url}`)
    .then(res => res.text())
    .then(text => {
      console.log(text);
      this.setState({
        users: text
    })
    .catch(e => {
      // do nothing
    })
}

无法加载 url：请求的资源上不存在“Access-Control-Allow-Origin”标头。”等

这意味着浏览器不允许您的前端代码访问来自服务器的响应，因为响应不包含Access-Control-Allow-Origin响应标头。

因此，为了使上述代码工作，您需要修复该服务器上的服务器配置，以便它发送必要的Access-Control-Allow-Origin响应标头。

但是，在 Chrome 网络选项卡中，我可以看到请求和响应，状态为 200 等。但是，在控制台中， myconsole.log和this.setState永远不会被调用。

在服务器不发送Access-Control-Allow-Origin响应标头的情况下，这是预期的。在这种情况下，浏览器仍然会收到响应——这就是为什么你可以在 devtools 网络选项卡中看到它——但仅仅因为浏览器收到响应并不意味着它会将响应暴露给你的前端 JavaScript 代码。

浏览器只会让你的代码访问包含Access-Control-Allow-Origin响应头的响应；如果响应不包含该标头，则浏览器会阻止您的代码访问它。

我的问题：为什么响应在“网络”选项卡中没有显示错误，而同时在控制台中出现错误？

由于上述原因。浏览器本身在获取响应时不会出错。但是您的代码遇到错误，因为它试图访问res不存在的对象；浏览器还没有创建那个res对象，因为浏览器没有向你的代码公开响应。