javascript - 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” header 。”等等

但是，在 Chrome 网络选项卡中，我可以看到请求和响应，状态为 200 等。在控制台中，我的 console.log和this.setState然而，从未被调用过。

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

Answer 1

fetch(`${url}`) 调用返回一个使用 Response object 解析的 Promise。 ，并且 Response 对象提供 methods解决 text , JSON data ，或 Blob .

因此，要获取所需的数据，您需要执行以下操作:

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

Failed to load url: No 'Access-Control-Allow-Origin' header is present on the requested resource." etc

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

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

However, in the Chrome Network tab, I can see the request and the response, with status 200, etc. In the console, my console.log and this.setState are never called, however.

在服务器不发送 Access-Control-Allow-Origin 响应 header 的情况下，这是预期的。在这种情况下，浏览器仍然会收到响应 - 这就是为什么您可以在 devtools Network 选项卡中看到它 - 但仅仅因为浏览器收到响应并不意味着它将向您的前端 JavaScript 代码公开响应。

浏览器仅允许您的代码访问包含 Access-Control-Allow-Origin 响应 header 的响应；如果响应不包含该 header ，则浏览器会阻止您的代码访问它。

My question: Why does the response show no error in the Network tab, while simultaneously erroring in the console?

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