Question

im试图向API发出简单请求

  fetch('someurl').then((data) => console.log(data))

但是我得到了经典的No 'Access-Control-Allow-Origin' header is present on the requested resource.

如何在客户端修复此问题？还是为API作者更改它并添加正确的响应标头修复它的唯一方法？

Answer 1

您可以在Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?中找到一些解决方法，但无法从客户端解决问题。必须在服务器上通过设置允许它的正确标头来解决它。

Answer 2

为加深您对CORS的理解，请查看MDN在Cross-Origin Resource Sharing (CORS)上的文章。非常广泛。

使用jsonP，您可以在进行简单的GET请求时解决此问题。另请参阅这篇较旧的，简短而甜蜜的文章，其中详细介绍了它。 How JSONP Works。

JSONP的维基百科定义如下：

在Web中运行的JavaScript程序中使用的一种通信技术   浏览器。它提供了一种从服务器中的服务器请求数据的方法。   不同的域，这是典型的Web浏览器禁止的，因为   相同的原产地政策。

牢记这一点，让我们看下面的示例并提出请求。

$(document).ready(function() {
  $.getJSON("https://jsonplaceholder.typicode.com/users?callback=?", function(json){
    console.log('getJSON call: ', json);
  });
})

FETCH不支持jsonp

经过一番研究，事实证明 Fetch API 不支持jsonP请求。如果看一下this jsFiddle example，您会发现$.getJSON调用与后缀?callback=?一起使用时返回数据，而'fetch（）'调用失败并返回CORS消息。打开控制台以查看两个调用的结果。

您在评论中的问题

此外，您知道为什么fetch（{url：'https://randomurl“}）不会会收到CORS阻塞，但是会获取（'https://randomurl'）吗？

您提供的第一个参数是字符串/ URL，第二个（可选）参数可以是选项对象{}。因为您提供一个对象作为第一个参数，所以找不到该URL。它不会给您带来CORS阻塞的原因是因为您提供了一个无效的URL，该URL返回404状态。通过返回200 OK状态无法找到与页面有关的交易错误，并且在返回的JSON中，它将为您提供更多信息。

从fetch（）返回的Promise不会因HTTP错误状态而拒绝即使响应是HTTP 404或500，它也会解析通常（将ok状态设置为false），并且只会在网络故障或是否有任何阻止请求完成的事情。

Source: MDN docs

我希望这有助于拓宽您对CORS以及Fetch如何工作的理解。

如何从客户端发出CORS请求

2 个答案: