如何从客户端发出 CORS 请求 [重复]答案

【问题标题】：How to make a CORS request from the client [duplicate]如何从客户端发出 CORS 请求 [重复]
【发布时间】：2019-01-24 13:54:12
【问题描述】：

我试图向 API 发出一个简单的请求

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

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

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

【问题讨论】：

如果服务器不允许，则无法发出此请求。
标头必须由服务器设置
你不能。服务器不允许来自其他域的请求。
这是一项安全功能，可防止某人使用不应使用的资源。如果您可以访问服务器端代码，则需要实现 CORS 标头，如果您没有，那么您不能/不应该这样做。
查看 API 是否支持 JSONP 回调 URL，这可能是您唯一的选择。另请参阅问题Use of success / jsonpCallback with ajax request 的已接受答案

标签： javascript url cors access-control

【解决方案1】：

要加深您对 CORS 的理解，请查看 MDN 在 Cross-Origin Resource Sharing (CORS) 上的文章。它相当广泛。

使用 jsonP 可以在发出简单的 GET 请求时解决这个问题。另请参阅这篇较旧、简短且温馨的文章，该文章对其进行了更详细的解释。 How JSONP Works.

维基百科对 JSONP 的定义如下：

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

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

$(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 消息。打开控制台查看两个调用的结果。

您在 cmets 中的问题

另外，你知道为什么 fetch({ url : 'https://randomurl" }) 不会得到 CORS 阻塞但 fetch('https://randomurl') 会？

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

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

Source: MDN docs

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

【讨论】：

ok 看起来不错，但我正在使用 fetch。所以我想我只是做fetch('https://someurl.com/someapi/1.0/something?callback=successCallback').then((data) => console.log(data) 或类似的东西？
另外，如果在完成所有这些传递对象以使用您在上面以 xhr 方式完成的各种键进行获取之后，我仍然被 CORS 拒绝，这是什么意思？
CORS 是跨域资源共享的缩写。当您阅读它以了解更好地提出请求时，它将有所帮助。检查Wikipedia。我正在尝试调整我的示例以使用 fetch 和允许它的 API。
您是否使用了我可以用来测试的公共 API？
不幸的是不是公共 API，而是任何人，但使用任何一个，我会明白的，即jsonplaceholder.typicode.com

【解决方案2】：

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

【讨论】：