如何从客户端发出 CORS 请求

Question

我正在尝试向 API

发出一个简单的请求

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

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

如何在客户端解决这个问题？或者是 API 作者更改它并添加正确响应的唯一方法 headers?

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?中找到一些解决方法，但您无法从客户端解决问题。它必须在服务器上通过设置正确的 headers 来解决...

Answer 2

要加深对 CORS 的理解，请查看 MDN 关于 Cross-Origin Resource Sharing (CORS) 的文章。范围很广。

使用 jsonP，您可以在发出简单的 GET 请求时解决这个问题。另请参阅这篇更详细地解释它的较旧的、简短而有趣的文章。 How JSONP Works.

The Wikipedia Definition of JSONP is as follows:

a communication technique used in JavaScript programs which run in Web browsers. It provides a method to request data from a server in a different domain, something prohibited by typical web browsers because of the same origin policy.

考虑到这一点，让我们看看下面的例子并提出请求。

$(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 调用 returns 数据时使用后缀 ?callback=? 而 'fetch()' 调用失败并且 returns 一条 CORS 消息。打开控制台查看两次调用的结果。

你的问题在评论里

Also, do you know why fetch({ url : 'https://randomurl" }) would not get a CORS blockage but fetch('https://randomurl') would?

您提供给 fetch 的第一个参数是 string/URL，第二个（可选）参数可以是选项对象 {}。因为您提供了一个对象作为第一个参数，所以找不到 URL。它不给你 CORS 阻塞的原因是因为你提供了一个无效的 URL，returns 一个 404 状态。 Fetch deals with page cannot be found errors 通过返回 200 OK 状态，在返回的 JSON 中，它将为您提供更多信息。

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.

Source: MDN docs

我希望这有助于加深您对 CORS 和 Fetch 工作原理的理解。

如何从客户端发出 CORS 请求

How to make a CORS request from the client

javascript

url

access-control

cors