I am trying to use the Google Docs API to get spreadsheet data as XML, and eventually JSON data. I have put the URL (http://spreadsheets.google.com/feeds/list/0Aizy-VIdLC0QdDNNRkpfVncxQzZRNG9fMVhueXVMenc/1/private/values) in my browser, and I get the data, even when not logged in to Google.
When I try with jQuery Ajax, I get the "page not found" error.
$.get('http://spreadsheets.google.com/feeds/list/0Aizy-VIdLC0QdDNNRkpfVncxQzZRNG9fMVhueXVMenc/1/private/values', function(data) {
console.log(data)
});
I am guessing that same origin policy might be the cause of the Ajax error, so I tried with PHP, but I get the error.
echo file_get_contents("http://spreadsheets.google.com/feeds/list/0Aizy-VIdLC0QdDNNRkpfVncxQzZRNG9fMVhueXVMenc/1/private/values");
I am aiming to get the Google Docs spreadsheet data into a JSON object for use on a webpage.
How can I fix this error?
You have to be logged in in order to be able to retrieve the spreadsheet data.
Visiting http://spreadsheet.google.com/.../private/values while logged in results in a meaningful XML page. Trying to load the same page when not logged in, however, results in a "Page Not Found".
According to the response header from the JQuery response, the only cause of this error is not being logged in (shown below).
WWW-Authenticate: No credentials were included in your request.
See The Protocol Guide for the relevant documentation.
Supposing you double-checked your URL string, the reason could be same origin policy. You cannot fetch data from a different domain due to browser's strict security policy.
If you want to get past this, you need to use a different approach, such as JSONP.
You can read more about how to implement JSONP in jQuery on the Ajax documentation page.
Related
I am new to Ajax/json/jquery so I have few questions. Currently, I'm having an API like https://example/api/1.1 which contain JSON block look similar to this
[{"id":"1","FirstName":"Micheal","LastName":"Kooling"},{"id":"2","FirstName":"Mike","LastName":"Kooling"}]
I tried to use XMLHttpRequest and AJAX to fetch the data but it gave me an error that I have been blocked by CORS: No 'Access-Control-Allow-Origin' header is present on the requested resource. And I have looked at a lot of article about it and nothing worked yet so if anyone can help me solve this?
So I tried another way using $(function(){ $.getScript('https://example/api/1.1');}); and this time the server response the data correctly but I do not know how to show the data from the API to script?
Can anyone explain me why the server respone and did not get blocked when I'm using getScript() function?
The API-Server has to be configured to accept your request. Otherwise it will block it and the client will throw the CORS error. The only way around this is to let your server request the API and then let the client make a request to your server, or to ask the owner of the server to enable CORS for your domain.
For further information look at the documentation: https://developer.mozilla.org/de/docs/Web/HTTP/CORS
I have built a REST API with Node.js Express http://localhost:3000/api/feeds with node.js and filled with data.
router.get('/api/feeds', function (req, res, next) {
documentDBConfig.getAllDocuments()
.then(() => res.json(documentDBConfig.feedsArray));
});
Now i make a static website and want to use javascript or jquery to get data from my REST API. I used this code
$.getJSON( "http://localhost:3000/api/feeds", function( data ) {
console.log(data);
});
But it keeps saying
XMLHttpRequest cannot load http://localhost:3000/api/feeds. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.
I know i'm doing it wrong, but i couldn't find the correct way. How can i get this json content with my website from my REST API (http://localhost:3000/api/feeds) ?
Edit: I don't get this warning with explorer, but i can not get the content. And now i solved the chrome problem thus i don't get this warning anymore. But i can't read the content. That is not a duplication.
Now i get this warning
Failed to load resource: the server responded with a status of 404 (Not Found)
Can you show us your REST api code so we can help you ? You need to set some headers in your backend to allow requests coming from other origins.
If you happen to be using express, this will help you. But you could have built the REST api in another way, so please provide us with more information.
This is because you are accessing a resource from another domain.
You try to access http://localhost:3000 from http://localhost:63342.
You can read more about this here https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Origin
Basically you are performing a CORS request which means you are trying to call a resource on different server. So your REST api should allow CORS requests by adding the response headers allowing the UI server resource.
Please Refer to this question if it helps
I don't know if this is a duplicate post or not, sorry if it is. I'm using jquery.getJSON to load a json on my server which works just fine. Although, if I try and load a json file on a different server it doesn't work. I know I don't have any code here (because there's not much point) but I just want to know if I'm using it wrong or if it isn't supposed to load external files. I'm using the iOS Safari browser if that effects anything.
EDIT: I've looked at the console (idk what the error thing really means, it's just red with an x by the url it's trying to get the json from) and it looks like it's not actually receiving the data. Plus, do remember I'm on iOS, not desktop so I couldn't look at the console in the "Develop tab :P
EDIT 2: Great! I think I got it working! http://skitty.xyz/getJSON/
You're most likely encountering a path issue; the purpose of $.getJSON is to acquire data via http GET request so yes, it is intended to work remotely. To diagnose your issue, make certain you can access the json file in your browser first: http://domain.com/my_data.json. If that works, use that as the URL you pass into $.getJSON:
$.getJSON( 'http://domain.com/my_data.json', function(data) {
// do something with your data
});
http://api.jquery.com/jquery.getjson/
jquery.getJSON uses ajax which is all about external resources. Here's a couple things to check for if it's not working on an external resource:
1: Is the path you specified correct? The usage is jquery.getJSON(path, callback). The path should be something you can just drop in your browser and see. If an incorrect path is your problem, you'll see a 404 in the console.
2: Is the resource http and your site https? Non-secure resources on secure pages will get blocked by browser security features. You'd see a error to this effect in the console.
3: Is CORS (Cross-origin resource sharing) enabled for your site on the external resource? Servers will sometimes use a whitelist of IPs and domains to determine what origins are allowed to make requests of it. You'd also see an error to this effect in the console.
There probably some other things to look for but this is where I'd start.
Also, by all means, use the debugging features of Safari to LQQK at the actual HTTP data-streams that are passing back-and-forth in response to what you're doing. (You might need to click on a preference to see the "Develop" menu, which will take you to "Show Web Inspector" and its Network tab.)
This approach will instantly answer many questions that a JavaScript-centered approach will not so-readily tell you. (And of course, you can look at the JavaScript console too ... and at the same time.) "The actual data streams, please." Safari will tell you "exactly what bytes" your app actually sent to the server, and "exactly what bytes" the server sent in return. "Priceless!™"
Are you saying you are using jquery ajax request to load some json data from a server?
check the "not working server" has the same end point as your server.
Check if the url you want to get data from is correct.
check if console logged any errors.
Also quote from http://api.jquery.com/jquery.getjson/
"Additional Notes:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
Script and JSONP requests are not subject to the same origin policy restrictions."
I have already published a app script, and I test the query string in the browser, and it works well. I would like to send a xmlhttprequest to the script, but it shows =>
XMLHttpRequest cannot load https://script.google.com/macros /s/XXXXXXXXXX/exec. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://docs.google.com' is therefore not allowed access.
This is the app script code:
function doGet(e){
Logger.log(e.parameter.id);
//other function
return ContentService.createTextOutput("Hello World");
}
Here is the client code:
$.ajax({
url:'https://script.google.com/macros/s/XXXXXXXX/exec',
method:'POST',
data:{
id: "123123"
},
success:function(){
console.log("success");
}
});
There are a few possibilites, and I have ran into this error before myself. As I have insufficient reputation to comment and ask for clarification, I will write the most probable cause.
This problem has 2 parts - You can't post (unstringified) objects, and errors on google apps script do not have CORS headers
solution: stringify and parse the object
Without converting the object to a string, your browser will just send [Object object] and not the information.
This will cause an error on your script, and error messages by Google Script are HTML webpages that don't have CORS headers, which triggers the CORS error that does not really tell you the true problem
To be able to successfully POST the parameters, you have to convert the object to a string (e.g. by using JSON.stringify()), get the value through e.postData.contents on your google apps script, parse it, before you can use it as if it were an object.
I personally found when I read that I can't send raw objects in javascript - pass object via post
You mentioned that the code worked when you tested it using the query string in your browser, however, it is different as that will be a GET request and will trigger doGet instead of doPost
this is the most probable explanation and hope it helps!
Do test your code with default values before deploying it as once you deploy your code it can get very troublesome. You can use https://hurl.it to see what actually comes out without cors errors in the way.
jQuery.ajax(
{
url:'http://en.wikipedia.org/wiki/Football',
type:'get',
dataType:'jsonp',
success:function(data){alert(data);},
}
i want to read wikipedia page from my domain using jQuery, iam doing as above.
as expected wikipedia is sending data as pure html, but when we use $.ajax to get cross domain data it expects data received to be in json format so iam getting error and unable to read the wikiepedia response.
please suggest me how can i read wikipedia url using jquery/javascript (without involving any server side tech) also is there any api available through which i get json from wikipedia.
There is a Wikipedia API (more precisely, MediaWiki, the engine of Wikipedia, has an API). You can read more about it here: http://www.mediawiki.org/wiki/API
Here is a jQuery example on how to fetch the formatted content of the "Football" page:
$.getJSON("http://en.wikipedia.org/w/api.php?action=parse&format=json&callback=?", {page:"Football", prop:"text"}, function(data) {console.log(data);});
The endpoint has to be configured to serve jsonp which in this case it is not. It will not magically transform the normal html response type into jsonp for you. You will need to create a proxy on your server which will serve you the remote content for example if you are using php then check out this link.
You can use YQL for page fetching and get the JSONP response.
http://developer.yahoo.com/yql/console/#h=select%20*%20from%20html%20where%20url%3D%22http%3A//en.wikipedia.org/wiki/Football%22%0A