CORS错误，但无论如何都获取数据 [英] CORS error, but data is fetched regardless

问题描述

我在S3存储桶中托管了一个生成的React网站.我的组件之一尝试在加载时获取内容:

I have a generated React site I am hosting in an S3 bucket. One of my components attempts to fetch something when loaded:

require('isomorphic-fetch')
...

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

我要获取的url是一个AWS API网关.我通过下拉菜单启用了CORS，没有更改默认配置.

The url I am fetching is an AWS API Gateway. I have enabled CORS there, via the dropdown, with no changes to the default configuration.

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

In my console, for both the remote site and locally during development, I see:

无法加载url:在所请求的资源上不存在'Access-Control-Allow-Origin'标头."等等

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

但是，在Chrome的网络"标签中，我可以看到状态为200等的请求和响应.但是在控制台中，我的console.log和this.setState从未被调用.

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.

我了解到CORS是一个常见的痛点，并且许多问题都涉及到CORS.我的问题:为什么响应在网络"选项卡中没有显示错误，而在控制台中却同时显示错误?

I understand that CORS is a common pain point, and that many questions have touched on CORS. My question: Why does the response show no error in the Network tab, while simultaneously erroring in the console?

推荐答案

fetch(`${url}`)调用返回一个用 Response对象，并且该Response对象提供文本， JSON数据，或 Blob .

The fetch(`${url}`) call returns a promise that resolves with a Response object, and that Response object provides methods that resolve with text, JSON data, or a Blob.

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

So to get the data you want, you need to do something like this:

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

无法加载网址:所请求的资源上没有"Access-Control-Allow-Origin"标头."等

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

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

That means the browser isn’t allowing your frontend code to access the response from the server, because the response doesn’t include the Access-Control-Allow-Origin response header.

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

So in order for the above code to work, you’ll need to fix the server configuration on that server so that it sends the necessary Access-Control-Allow-Origin response header.

但是，在Chrome的网络"标签中，我可以看到状态为200等的请求和响应.但是在控制台中，我的console.log和this.setState从未被调用.

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

That’s expected in the case where the server doesn’t send the Access-Control-Allow-Origin response header. In that case, the browser still gets the response — and that’s why you can see it in the devtools Network tab — but just because the browser gets the response doesn’t mean it will expose the response to your frontend JavaScript code.

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

The browser will only let your code access the response if it includes the Access-Control-Allow-Origin response header; if the response doesn’t include that header, then the browser blocks your code from accessing it.

我的问题:为什么响应在网络"选项卡中没有显示错误，而在控制台中却同时显示错误?

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

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

For the reason outlined above. The browser itself runs into no error in getting the response. But your code hits an error because it’s trying to access an res object that’s not there; the browser hasn’t created that res object, because the browser isn’t exposing the response to your code.

这篇关于CORS错误，但无论如何都获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！