I'm stuck with this for hours now. Please help me to spot the mistake!
Why is this d3.text request failing? (link to diff.php)
d3.text("http://q39.qhor.net/cach/diff.php?action=diff", function(diff) {
document.write(diff); // returns 'null'
});
While this is working? (link to ltcProxy.php)
d3.text("http://freya.syari.net/pool/ltcProxy.php?action=diff", function(diff) {
document.write(diff); // returns a number read from input
});
I've been reading the documentation on this back and forth, tried using different input formats (text/plain, text/html, etc. ...) but I cant get the first snippet to work.
Whats wrong with it?
As you've discovered, if the file request returns with an error, the data object (diff) will be null. You could have figured it out much faster if you always use the two-argument version of the callback function, and make the first line of your function an error check:
d3.text("http://q39.qhor.net/cach/diff.php?action=diff", function(error, diff) {
if (error) {
document.write("Error reading file");
return;
}
document.write(diff); // returns 'null'
});
The "error" object passed in by d3 isn't very useful beyond checking for its existence -- it's the XMLHTTPRequest function that was used, not the error returned. The error itself should be logged to your console by the browser.
Why would a file request return with an error even though you can open the file up directly no problem? Because Javascript is exceedingly polite when using external files: it will only use them if the server includes a header that says they may be used by your webpage.
Specifically, the error message that should be displaying on your console when you try to run that request will be something like
XMLHttpRequest cannot load http://q39.qhor.net/cach/diff.php?action=diff. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.
In other words, you cannot use someone else's file in your script unless it specifically tells your browser that you have permission to use it. The proxy server you use in the second example is fetching the file for you, and then passing it on to the browser with the instruction that it may be used by any website in the http://syari.net domain. If I try to use that file name from JS fiddle, however, I still get an error:
XMLHttpRequest cannot load http://freya.syari.net/pool/ltcProxy.php?action=diff. The 'Access-Control-Allow-Origin' whitelists only 'http://syari.net'. Origin 'http://fiddle.jshell.net' is not in the list, and is therefore not allowed access.
More on Access Control and HTTP requests:
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
Related
I am trying to access images from a Google Photos album and populate a webpage with those images. This goal has been completed before, but implemented with Axios (which I'm not very familiar with). My issue is that my origin (currently a local port) is not allowed by Access-Control-Allow-Origin. From the tutorials and examples I've followed, including this one from MDN, I thought my implementation allows the port I'm running on, but I still run into the same issue.
// This is not the actual album url; for privacy I have changed it
const ALBUM_URL = "https://my-google-photos-album-url";
$(document).ready(function()
{
GetAlbum();
});
function GetAlbum()
{
const xhr = new XHRHttpRequest();
xhr.open("GET", ALBUM_URL);
// Set the origin to the port we will be using
xhr.setRequestHeader("Access-Control-Allow-Origin", "http://localhost:8000");
xhr.onreadystatechange = function(data)
{
console.log(data);
}
xhr.send();
}
Expected Behavior: Print a string of HTML and JS as was shown in the linked example.
Actual Behavior: Gives an error indicating that "http://localhost:8000" is not allowed. Exact details are given below.
Error log:
Origin http://localhost:8000 is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load https://my-google-photos-album-url due to access control checks.
Failed to load resource: Origin http://localhost:8000 is not allowed by Access-Control-Allow-Origin.
What am I missing here? I have also tried setting "Access-Control-Allow-Origin" to "*", but without any luck. Any and all help is useful, thanks!
The CORS error that you get is returned by the server that you are trying to access - the server behind the https://my-google-photos-album-url.
If you have access to this server, you should set there the CORS policy that will allow the client (http://localhost:8000 in your case) to access its resources. Otherwise, I'm not sure you can access it.
This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 3 years ago.
I'm unable to retrieve data from the Rescue Time API. I'm making a request in a JavaScript file using the jQuery get() method. Here is a look at the JavaScript related to the API GET request:
$.get('https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview', function(data) {
// callback function code...
});
The "key=########################" is the paramater that includes my API key.
When running the script (either locally or on my personal domain), I receive a cross origin error:
XMLHttpRequest cannot load https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I understand that this is happening because i'm requesting content that is on a different domain than the one that is making the AJAX request. That being said, how do I get around this? I've read the CORS MDN documentation, but could not decode what actionable steps I need to follow in order to resolve this issue.
I need some actionable steps.
Set up a CORS proxy using the code from https://github.com/Rob--W/cors-anywhere/ or similar.
https://cors-anywhere.herokuapp.com/ is a public instance running that code, and the way you could use it is by changing your existing code to this:
$.get('https://cors-anywhere.herokuapp.com/https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview', function(data) {
// callback function code...
});
Be aware though that if you do that, your key would potentially be exposed to the operator of that https://cors-anywhere.herokuapp.com/ instance. So if that’s a concern then don’t try it, and instead set up your own proxy at https://some.url.for.your.proxy and change your code to:
$.get('https://some.url.for.your.proxy/https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview', function(data) {
// callback function code...
});
Either way the result will be that your request gets sent through the specified CORS proxy, which forwards the request to the https://www.rescuetime.com/anapi/data… endpoint and then receives the response. The proxy backend then adds the Access-Control-Allow-Origin header to the response and finally passes that back to your requesting frontend code.
Your browser then allows your frontend code to access the response, because that response with the Access-Control-Allow-Origin response header is what the browser sees. Otherwise, if the response lacks Access-Control-Allow-Origin, browsers won’t let your code access it.
A CORS proxy like that is the only option if you want to make the request from frontend JavaScript code running in a browser, and want to consume the response from that frontend code. Otherwise, without the use of such a proxy, browsers will block your code from accessing the response—because the https://www.rescuetime.com/anapi/data… API endpoint doesn’t itself send the necessary Access-Control-Allow-Origin response header.
Your only other option otherwise is to not make the request from your frontend code but instead make the request from whatever backend server-side code you’re running. In that case there’s no browser in the middle enforcing cross-origin restrictions on the request.
I have tried every possible code by following this post but code give me following error
XMLHttpRequest cannot load https://api.cloudinary.com/cloud_name/resources/image. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.
Code (1)
$.get('https://app_key:app_secret#api.cloudinary.com/cloud_name/resources/image');
Code (2)
$.get('https://api.cloudinary.com/cloud_name/resources/image');
For both it fails to authenticate.
Note: I am not using any server side programming. Please give me any client side solution/code.
By $.get(...) I understand that you're performing this call on the client side (jQuery code). This means that you're revealing your account's api_secret to your users, they can get your Cloudinary account's credentials with a simply "View source" of your page, then they'll be able to gain full control over your account, including uploading, renaming and even deleting resources. As you probably don't want that to happen, you should either perform this on a server-side only, or use the client-side (unsigned) method of returning all resources sharing a certain tag. For more information:
https://support.cloudinary.com/hc/en-us/articles/203189031-How-to-retrieve-a-list-of-all-resources-sharing-the-same-tag-
I have an application where I use Meteor.http.call() in a server side function.
var ret = Meteor.http.call("GET", "https://www.quandl.com/api/v1/datasets/SF1/<...>");
This works using a localhost meteor server: I have my data back in the ret variable.
I deployed the application to ruleoneinvesting.meteor.com and now I get this error using that same call:
XMLHttpRequest cannot load https://ddp--4645-ruleoneinvesting.meteor.com/sockjs/info?cb=p7czcbhqun. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://ruleoneinvesting.meteor.com' is therefore not allowed access. The response had HTTP status code 503.
This didn't helped.
Sorry, my fault. I was using a
fs.writeFile('../../../../../../data/')
in a folder that it was not allowed to write in *.meteor.com.
That caused the HTTP status code 503.
Since you're getting "HTTP status code 503", this may not be something you can or need to fix.
According to wicked peter, the problem may not be yours but the server's:
503 Service Unavailable
The server is currently unavailable (because it is overloaded or down for maintenance). Generally, this is a temporary state
I have some javascript that is making an ajax request using ajax. The preflight OPTIONS call for this request fails. I'd like to display some debug information to the user about the call and it's status code - how can I get this information from the jqXhr object in the error callback?
$.ajax
url: url
headers: headers
...
error: (jqXhr, status) =>
# how can I get info about OPTIONS call here?
At the moment, this simply isn't possible.
CORS is severely lacking in error-information when a pre-flight request fails for whatever reason, both in the spec, and in browser implementations. Relevant excerpts from HTML5 Rocks:
If there is an error in the CORS request, the browser will fire the client's onerror event handler. It will also print the following error to the console log:
XMLHttpRequest cannot load http://api.alice.com. Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.
The browser doesn't give you a lot of details on why the error occurred, it only tells you that something went wrong.
... it goes on to say (under known issues):
No error information provided to onerror handler - When the onerror handler is fired, the status code is 0, and there is no statusText. This may be by design, but it can be confusing when trying to debug why CORS requests are failing.
Indeed, all you'll find is that the jqXHR statusText property will be blank, the status code will be 0, and getAllResponseHeaders() will return an empty string.
Just to be clear: this is a problem getting data out of the underlying XMLHttpRequest object. It's not that jQuery is masking information or otherwise not making it available; it simply isn't possible (at the moment) to get error-data out of the XmlHttpRequest object in this circumstance.