jQuery Access-Control-Allow-Origin 不允许 Origin 'url'
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7216059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Origin 'url' is not allowed by Access-Control-Allow-Origin
提问by PedroC88
I'm trying to get a currency rate with the Google Currency Calculator
using the following jquery (dummy) code:
我正在尝试Google Currency Calculator
使用以下 jquery(虚拟)代码获取货币汇率:
$.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 cannot load http://www.google.com/ig/calculator?hl=en&q=1DOP=?USD. Origin 'hostURL' is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest 无法加载http://www.google.com/ig/calculator?hl=en&q=1DOP=?USD。Access-Control-Allow-Origin 不允许 Origin 'hostURL'。
Looking in the site I've found various topics on the subject but they mostly refer to local file access and attempt to solve it by starting chrome with an additional parameter (I'm also using chrome) but such is not my issue, which actually seems more related to cross-domain restrictions.
在该站点中,我发现了有关该主题的各种主题,但它们主要是指本地文件访问,并尝试通过使用附加参数启动 chrome(我也在使用 chrome)来解决该问题,但这不是我的问题,实际上似乎与跨域限制更相关。
So, question is: How can I use jQuery to get the rate from that url?
所以,问题是:如何使用 jQuery 从该 url 中获取费率?
回答by jfriend00
Ajax requests are limited by the browser's Same Origin Policy. In a nutshell, that means that you can't talk directly to a server via ajax that isn't on the same domain as the page your script is running in. So, unless you're developing a page for google.com, you can't talk to google.com directly.
Ajax 请求受浏览器的同源策略限制。简而言之,这意味着您不能通过 ajax 直接与服务器对话,该服务器与您的脚本运行所在的页面不在同一个域上。因此,除非您正在为 google.com 开发页面,否则您无法直接与 google.com 交谈。
There are work-arounds for this limitation involving the insertion of script tags (JS files loaded via script tags are not subject to the same origin policy) and then using JSONP callbacks to communicate data results back to your main script from those script tags. That is probably what you need to do here if the API you're attempting to use supports it.
此限制有一些变通方法,包括插入脚本标签(通过脚本标签加载的 JS 文件不受同源策略的约束),然后使用 JSONP 回调将数据结果从这些脚本标签传回主脚本。如果您尝试使用的 API 支持它,这可能就是您在这里需要做的事情。
jQuery will help you a lot here as it can automatically turn an ajax call into a JSONP call that is loaded via script tags and can work in cross domain situations. According to the jQuery doc for it's ajax function, it will do this automatically if it sees "callback=" in the parameter string for the ajax call or if you set the crossDomain option.
jQuery 将在这里为您提供很多帮助,因为它可以自动将 ajax 调用转换为通过脚本标签加载的 JSONP 调用,并且可以在跨域情况下工作。根据jQuery doc for it's ajax function,如果它在 ajax 调用的参数字符串中看到“callback=”,或者如果您设置了 crossDomain 选项,它将自动执行此操作。
回答by no.good.at.coding
Edit
I thought it was clear what the problem was but it seems it might not be so here goes. This error you're seeing is the server restricting your domain from accessing it's resources via ajax requests. This is standard JavaScript security- your script can only talk to the domain it originated from. Since your JavaScript was not loaded from Google's domains, it's not in the list of domains allowed to access the calculator API via ajax and that's why you see this error message.
编辑
我认为很清楚问题是什么,但似乎不是这样。您看到的此错误是服务器限制您的域通过 ajax 请求访问其资源。这是标准的 JavaScript 安全性- 您的脚本只能与它源自的域进行通信。由于您的 JavaScript 不是从 Google 的域加载的,因此它不在允许通过 ajax 访问计算器 API 的域列表中,这就是您看到此错误消息的原因。
Options for making cross domain requests with jQuery are outlined here. As I mentioned earlier, JSONP will only be a valid option if the server supports it because it must send back appropriately formatted JSON.
此处概述了使用 jQuery 进行跨域请求的选项。正如我之前提到的,只有在服务器支持 JSONP 的情况下,JSONP 才会是一个有效的选项,因为它必须发回正确格式化的 JSON。
It might help if you provided links to the pages that you're referring to.
如果您提供指向您所指页面的链接,这可能会有所帮助。
From the looks of things though, this API doesn't support JSONP(unless there is an undocumented parameter) which is pretty much your only option for cross-domain ajax requests in this case since you don't control the server and can't change the access control headers.
不过,从表面上看,这个 API 不支持JSONP(除非有一个未记录的参数),在这种情况下,这几乎是跨域 ajax 请求的唯一选择,因为您无法控制服务器并且不能更改访问控制标头。
You might want to consider building a server-side resource that will access this API for you without being constrained by the JavaScript security model such as the PHP script here.
您可能需要考虑构建一个服务器端资源,该资源将为您访问此 API,而不受 JavaScript 安全模型(例如此处的 PHP 脚本)的约束。
回答by Adam
It seems from this link - http://api.jquery.com/jQuery.ajax/- which was provided earlier by jfriend00 - explains a parameter you can include in the JQuery ajax request called "crossDomain" which is a boolean.
似乎从这个链接 - http://api.jquery.com/jQuery.ajax/- 它是由 jfriend00 早先提供的 - 解释了一个可以包含在名为“crossDomain”的 JQuery ajax 请求中的参数,它是一个布尔值。
crossDomain (default: false for same-domain requests, true for cross-domain requests) Type: Boolean If you wish to force a crossDomain request (such as JSONP) on the same domain, set the value of crossDomain to true. This allows, for example, server-side redirection to another domain. (version added: 1.5)
crossDomain(默认:false 同域请求,true 跨域请求) 类型:Boolean 如果你想在同一个域上强制跨域请求(例如 JSONP),请将 crossDomain 的值设置为 true。例如,这允许服务器端重定向到另一个域。(版本添加:1.5)
Therefore setting it to true should solve(?) this. I am not an expert, but I tried it after continuously running into this issue and it seemed to resolve the problem.
因此将其设置为 true 应该可以解决(?)这个问题。我不是专家,但我在不断遇到这个问题后尝试了它,它似乎解决了问题。
Example:
例子:
$.ajax({ //my ajax request
url: "_URL_I_AM_MAKING_REQUEST_TO_",
type: "GET",
cache: false,
dataType: "json",
**crossDomain: true,**
data: { _mydata_
success : function(response){}
});
回答by ssaltman
Minor additional point of info.
次要的附加信息点。
I got to this question because I got this error trying to post to my own server.
我遇到这个问题是因为我在尝试发布到我自己的服务器时遇到了这个错误。
Solution: make sure hostname matches in ajax call.
解决方案:确保主机名在 ajax 调用中匹配。
Exmaple:
例子:
//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/",