Javascript XMLHttpRequest 无法加载 Origin is not allowed by Access-Control-Allow-Origin
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14777576/
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
XMLHttpRequest cannot load Origin is not allowed by Access-Control-Allow-Origin
提问by user11235
I am trying to get an http:// javascript file via xhr but I am running into the error mentioned above.
我正在尝试通过 xhr 获取 http:// javascript 文件，但遇到了上述错误。
Here's my code:
这是我的代码：
function getXHR() {
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (is_chrome) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.widgets.org/widget/1.1.2/widget_api.js?autoCreate=false&log=true", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var s = document.createElement('script');
s.textContent = xhr.responseText;
(document.head||document.documentElement).appendChild(s);
s.parentNode.removeChild(s);
}
}
xhr.send();
}
}
This is only for Chrome because I would like to use the script in https:// but Chrome automatically blocks anything from http://. The server from which I am getting the script does not run https:// and I NEED the script/have multiple scripts I'd rather not all copy down into a data file.
这仅适用于 Chrome，因为我想在 https:// 中使用脚本，但 Chrome 会自动阻止来自 http:// 的任何内容。我从中获取脚本的服务器不运行 https:// 并且我需要脚本/有多个脚本我不想全部复制到数据文件中。
The error I'm running into:
我遇到的错误：
XMLHttpRequest cannot load http://api.widgets.org/widget/1.1.2/widget_api.js?autoCreate=false&log=true. Origin https://mysite.com is not allowed by Access-Control-Allow-Origin.
采纳答案by Sirko
Just insert the <script>tag directly instead of this XHR wrapper and then inserting the content to a <script>tag.
只需<script>直接插入标签而不是这个 XHR 包装器，然后将内容插入<script>标签。
function getScript() {
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (is_chrome) {
// generate script element and set its source
var s = document.createElement('script');
s.src = "http://api.widgets.org/widget/1.1.2/widget_api.js?autoCreate=false&log=true";
// remove the script element after loading
s.addEventListener( 'load', function(){ s.parentNode.removeChild(s); } );
(document.head||document.documentElement).appendChild(s);
}
}
Besides, I don't know, why you try to remove the script element after loading. This wont affect any of the objects/methods/variables created within that code.
此外，我不知道，为什么您在加载后尝试删除脚本元素。这不会影响在该代码中创建的任何对象/方法/变量。
回答by Sumith Harshan
I changed to full path of server file to short path as follows.
我将服务器文件的完整路径更改为短路径，如下所示。
$.post('http://example.com/pages/loadRandomImages.php',{'type':'loadRandomImages','loadingReq':'True'},function(data){
------------
----------
});
Changed it to,
改成，
$.post('/pages/loadRandomImages.php',{'type':'loadRandomImages','loadingReq':'True'},function(data){
------------
----------
});
Then worked fine in chrome.
然后在 chrome 中工作得很好。
回答by speakingcode
Browser's block XHR requests made to a server which is different the server of the page making the request, for security purposes related to cross-site scripting.
出于与跨站点脚本相关的安全目的，浏览器阻止 XHR 请求发送到与发出请求的页面的服务器不同的服务器。
If it's just a script you want to load, use
如果它只是您要加载的脚本，请使用
<script src="..."></script>
For general XHR, you can use the jsonp workaround, if the api provides it, or ask the operators of the API to enable CORS (cross-origin resource sharing)
对于一般的XHR，可以使用jsonp的解决方法，如果api提供，或者要求API的运营商开启CORS（跨域资源共享）
http://developer.chrome.com/extensions/xhr.htmlhttps://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORShttp://www.w3.org/TR/cors/http://en.wikipedia.org/wiki/JSONP
http://developer.chrome.com/extensions/xhr.html https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS http://www.w3.org/TR/cors/ http: //en.wikipedia.org/wiki/JSONP
