XMLHttpRequest cannot load Origin is not allowed by Access-Control-Allow-Origin
Solution 1
Just insert the <script>
tag directly instead of this XHR wrapper and then inserting the content to a <script>
tag.
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.
Solution 2
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.
Solution 3
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.
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)
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
Related videos on Youtube
user11235
Updated on June 28, 2020Comments
-
user11235 almost 4 years
I am trying to get an http:// javascript file via xhr but I am running into the error mentioned above.
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.
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.
-
epascarello about 11 years
-
-
marekful about 11 yearsThat's correct. You cannot do this via XHR if the domains are different. Read: developer.mozilla.org/en-US/docs/HTTP/…
-
user11235 about 11 yearsThis option doesn't quite solve the http:// and https:// problem I have. (i.e. [blocked] The page at mysite.com ran insecure content from api.widgets.org/widget/1.1.2/…)
-
speakingcode about 11 yearsi'm not entirely sure but i don't think the issue has anything to do with http vs https, it's an issue of cross-domain resources which will be blocked whether the resourse is http or https.
-
AlexScript over 10 yearsJust wanted to say thanks for this answer!! I had an XMLHttpRequest.open() statement that wasn't working because of the cross domain error above and by using a relative path instead, I got Chrome working perfectly. Much much thanks.