Access-Control-Allow-Origin 不允许 Origin 'url'

Posted 2023-02-27

【中文标题】Access-Control-Allow-Origin 不允许 Origin \'url\'

【英文标题】：Origin 'url' is not allowed by Access-Control-Allow-OriginAccess-Control-Allow-Origin 不允许 Origin 'url'

【发布时间】：2011-11-05 04:11:49

【问题描述】：

我正在尝试使用以下 jquery（虚拟）代码通过 Google Currency Calculator 获取货币汇率：

    $.getJSON("http://www.google.com/ig/calculator?hl=en&q=1" + "DOP" + "=?" + "USD",
        function(data) 
            $('.currNumber').each(function (index) 
                $(this).html(parseFloat($(this).html()) * 0.02681);
                                  );
          );

XMLHttpRequest 无法加载 http://www.google.com/ig/calculator?hl=en&q=1DOP=?USD。 Access-Control-Allow-Origin 不允许 Origin 'hostURL'。

在该站点上，我发现了有关该主题的各种主题，但它们主要是指本地文件访问，并尝试通过使用附加参数启动 chrome 来解决它（我也在使用 chrome），但这不是我的问题，这实际上似乎与跨域限制有关。

所以，问题是：我如何使用 jQuery 从该 url 获取速率？

【问题讨论】：

Cross domain scripting error?的可能重复

【参考方案1】：

Ajax 请求受浏览器的Same Origin Policy 限制。简而言之，这意味着您不能通过 ajax 直接与与运行脚本的页面不在同一个域中的服务器对话。因此，除非您正在为 google.com 开发页面，否则您无法直接与 google.com 对话。

这个限制有一些变通方法，包括插入脚本标签（通过脚本标签加载的 JS 文件不受同源策略的约束），然后使用 JSONP 回调将数据结果从这些脚本传回主脚本标签。如果您尝试使用的 API 支持它，这可能就是您需要在此处执行的操作。

jQuery 将在这里为您提供很多帮助，因为它可以自动将 ajax 调用转换为通过脚本标签加载的 JSONP 调用，并且可以在跨域情况下工作。根据jQuery doc for it's ajax function，如果在 ajax 调用的参数字符串中看到“callback=”或者您设置了 crossDomain 选项，它将自动执行此操作。

【讨论】：

我不是一个熟练的 Web 开发人员...如何做到这一点？

请阅读我最近更详细地描述它的编辑。 jQuery 可以为您完成大部分工作，但您必须适当地配置 ajax 调用。

我已经尝试过使用 &callback=? 但这会导致 resource interpreted as script but transferred with mime type text html 我认为这意味着响应的 MIME 类型为 text/html 而不是 text/javascript 但我无法修复既然我无法控制响应...我可以吗？

这通常是一个无害的警告。如果资源是作为脚本传输的，那么你应该没问题。您是否将 callback=xxxx 指向您自己的 javascript 函数？您是否阅读过该 Google API 中的 JSONP 支持以及它是如何工作的？一些关于 JSONP 的谷歌搜索可能会帮助你学习，然后学习与 JSONP 相关的 jQuery ajax 文档。

jQuery 对 JSONP 的支持只是硬币的一方面——如果服务器/API 不支持回调，jQuery 就无法工作。

【参考方案2】：

编辑 我认为很明显问题出在哪里，但似乎可能不是这样。您看到的此错误是服务器限制您的域通过 ajax 请求访问其资源。这是standard JavaScript security - 您的脚本只能与它起源的域对话。由于您的 JavaScript 不是从 Google 的域加载的，因此它不在允许通过 ajax 访问计算器 API 的域列表中，这就是您看到此错误消息的原因。

使用 jQuery 进行跨域请求的选项是 outlined here。正如我之前提到的，JSONP 只有在服务器支持的情况下才有效，因为它必须发回格式正确的 JSON。

---

如果您提供指向您所指页面的链接可能会有所帮助。

不过从表面上看，这个 API 不支持 JSONP（除非有一个未记录的参数），在这种情况下，这几乎是跨域 ajax 请求的唯一选择，因为您无法控制服务器并且不能更改access control headers。

您可能需要考虑构建一个服务器端资源，该资源将为您访问此 API，而不受 JavaScript 安全模型（例如 the php script here）的限制。

【讨论】：

链接到哪些页面？带有 JSON 响应的那个？那是 http://www.google.com/ig/calculator?hl=en&q=1DOP=?USD 我也在为 webworks 开发这个（所以它不会在任何服务器上运行，而是在移动设备上运行）

@PedroC88 是否有关于 API 的文档？你说你已经找到了关于这个主题的各种主题；在哪里？

关于浏览器错误的各种主题，而不是API本身，实际上，'关于那个API我还没有找到小队。

啊，我明白了——我以为你的意思是你看过 API 的文档。好吧，不幸的是，似乎没有支持 JSONP 的证据，如果没有它，您将无法通过 ajax 使用此服务。考虑编写一个简单的 PHP 代理。如果您托管自己的 Apache 服务器，您还可以使用代理/反向代理来透明地重定向域外的请求。

【参考方案3】：

似乎从这个链接 - http://api.jquery.com/jQuery.ajax/ - 之前由 jfriend00 提供 - 解释了一个可以包含在 JQuery ajax 请求中的参数，称为“crossDomain”，它是一个布尔值。

crossDomain（默认：同域请求为 false，跨域请求为 true） 类型：布尔值 如果您希望在同一域上强制执行跨域请求（例如 JSONP），请将 crossDomain 的值设置为 true。例如，这允许服务器端重定向到另一个域。 （添加的版本：1.5）

因此将其设置为 true 应该可以解决（？）这个问题。我不是专家，但我在不断遇到这个问题后尝试了一下，似乎解决了问题。

例子：

$.ajax( //my ajax request
        url: "_URL_I_AM_MAKING_REQUEST_TO_",
        type: "GET",
        cache: false,
        dataType: "json",
        **crossDomain: true,**
        data:  _mydata_
        success : function(response)
);

【讨论】：

这不是该属性的用途。如果您阅读了 jQuery 文档中所说的内容，“如果您希望在同一域上强制执行跨域请求（例如 JSONP），请将 crossDomain 的值设置为 true。”它声明它将使相同的域请求看起来像跨域请求。

【参考方案4】：

补充一点信息。

我收到这个问题是因为我在尝试发布到我自己的服务器时遇到了这个错误。

解决方案：确保 ajax 调用中的主机名匹配。

示例：

//This failed

$.post("http://domain.com/index.php/count/",

//This succeeded (the page this was called from was www.domain.com/.....)

$.post("http://www.domain.com/index.php/count/",