jQuery的CORS错误答案

【问题标题】：CORS error with jqueryjQuery的CORS错误
【发布时间】：2014-11-13 10:49:27
【问题描述】：

我目前正在使用the cloudapp API 进行一个项目，并且我正在使用jquery。这是我的代码：

 $.ajax({
            headers: { "Accept": "application/json"},
            type: 'GET',
            url: 'http://cl.ly/2wr4',
            crossDomain: true,
            success: function(data, textStatus, request){
                console.log(data);
            }
 });

当我运行它时，我得到 200 OK 响应和 Firefox 中的这个错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://cl.ly/2wr4. This can be fixed by moving the resource to the same domain or enabling CORS.

Google Chrome 中的这个错误：

XMLHttpRequest cannot load http://cl.ly/2wr4. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

并且没有任何内容记录到控制台。请问这个错误怎么解决？

谢谢。

【问题讨论】：

看看这个问题：stackoverflow.com/questions/5750696/… 你需要添加 Access-Control-Allow-Origin 标头。
最好使用像 PHP 的 cURL 这样的服务器端库。在这里可以对服务器端页面进行 ajax 调用，该页面具有这样的库，可以进行调用并获取结果

标签： javascript jquery ajax cors

【解决方案1】：

对于那些较新的编码人员来说，重要的一点是http://enable-cors.org/server.html 上的所有内容都假定您正在运行服务器。如果您像我一样是新手，那么这些类型的答案将无济于事。

如果您刚刚在您的计算机、CodePen 等上编写了一些代码 - 您无法对其进行配置。

服务器端和客户端脚本之间有一个重要的区别——你的 jquery 在客户端（即用户的计算机/浏览器）上运行，因此没有设置标题这样的事情。

当我设置我自己的服务器和我自己的 PHP 文件（PHP 是服务器端的，因此它在服务器上处理 - 而不是浏览器）并且能够开始发出请求时，我终于开始在这个问题上取得进展很好。

为任何淹没在涉及"Header set Access-Control-Allow-Origin "*" 答案的答案中的人添加此内容。当我开始的时候真的让我很沮丧。

【讨论】：

【解决方案2】：

CORS（跨域资源共享）是一项 HTML5 功能，它允许一个站点访问另一个站点的资源，尽管它们位于不同的域名下。

W3C 的 CORS 规范实际上很好地提供了一些简单的响应标头示例，例如密钥标头 Access-Control-Allow-Origin 和其他必须用于在 Web 服务器上启用 CORS 的标头。

如果您正在寻找有关如何在各种常见 Web 服务器上设置 CORS 的具体信息，请查看启用 CORS 共享网站。 http://enable-cors.org/

根据您上面提供的 URL，我认为您无法控制该服务器。因此，它根本行不通。

即使您启用了 crossDomain: true，服务器也应该返回您所需的标头，例如：

这是一个有效的服务器响应；特定于 CORS 的标题以粗体显示

HTTP 响应：

Access-Control-Allow-Origin: http://xyzcom
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

你可以试试这个：

$.ajax({
            headers: { "Accept": "application/json"},
            type: 'GET',
            url: 'http://cl.ly/2wr4',
            crossDomain: true,
            beforeSend: function(xhr){
                xhr.withCredentials = true;
          },
            success: function(data, textStatus, request){
                console.log(data);
            }
 });

否则，您需要联系 API 提供商。

【讨论】：

我尝试将 withCredentials 设置为 true，但我得到了同样的错误。

【解决方案3】：

要修复错误，您需要在服务器上启用 CORS。客户端希望看到返回的 CORS 标头以允许请求。它甚至可能发送一个预检请求以确保标头存在。

您可以为访问您的服务器的一个、多个或所有域启用 CORS 服务器端。配置因服务器类型而异。

更多信息请参考以下页面：http://enable-cors.org/server.html

您已经在上面的请求中启用了 CORS 请求，因此客户端您应该已准备就绪。

【讨论】：

嗨，我做了更多的挖掘工作，cloudapp 的 API 似乎不支持直接从浏览器发送的请求。这些库都用于在服务器端发送请求，这不应该触发跨域错误。您可能需要从服务器而不是客户端发送请求。

【解决方案4】：

要摆脱 cors 错误，您需要修改 jQuery min 文件。

【讨论】：