Menu
I'm making a simple gallery that takes the photos from a picasa account with html + javascript.
First, gets the list of albums and then, for each album, gets the list of photos. The first query works fine, but the others returns this error in the Browser (Chrome):
GET https://picasaweb.google.com/data/entry/base/user/114476218463019618611/albumid/5750459375839674337?alt=json&hl=en_US 404 (Not Found) jquery.js:8240 XMLHttpRequest cannot load https://picasaweb.google.com/data/entry/base/user/114476218463019618611/albumid/5750459375839674337?alt=json&hl=en_US. Origin file:// is not allowed by Access-Control-Allow-Origin.
This is the code:
var json_Album_URI = "https://picasaweb.google.com/data/feed/base/"
+ "user/" + username
+ "?alt=" + "json"
+ "&kind=" + "album"
+ "&hl=" + "en_US"
+ "&fields=" + "entry(media:group,id)"
+ "&thumbsize=" + 104
+ "&authkey=" + authkey;
$.ajax({
type: 'GET',
url: json_Album_URI,
success : function(resp) {
albums = resp.feed.entry;
},
dataType: 'json',
async: false
});
for (var id in albums) {
var album = albums[id];
var album_ID = album.id.$t.split('/')[9].split('?')[0];
var json_Photo_URI = "https://picasaweb.google.com/data/feed/base/"
+ "user/" + username
+ "/albumid/" + album_ID
+ "?alt=" + "json"
+ "&kind=" + "photo"
+ "&hl=" + "en_US"
+ "&fields=" + "entry(media:group)"
+ "&thumbsize=" + 104
+ "&authkey=" + authkey;
//this is the ajax call that fails
$.ajax( {
type: 'GET',
url: json_Photo_URI,
success: function(photos) {
console.log(photos);
},
dataType: "json",
async: false,
});
}
Thanks.
EDIT:
I notica that if I remove the line:
+ "/albumid/" + album_ID
works (of course, without the expected response).
578
1. Use the proxy setting in Create React App. "proxy": "https://cat-fact.herokuapp.com/", Now when you make an API request to https://localhost:3000/api/facts Create React App will proxy the API request to https://cat-fact.herokuapp.com/facts and the CORS error will be resolved.
To get rid of a CORS error, you can download a browser extension like CORS Unblock ↗. The extension appends Access-Control-Allow-Origin: * to every HTTP response when it is enabled. It can also add custom Access-Control-Allow-Origin and Access-Control-Allow-Methods headers to the responses.
If the server is under your control, add the origin of the requesting site to the set of domains permitted access by adding it to the Access-Control-Allow-Origin header's value. You can also configure a site to allow any site to access it by using the * wildcard.
Limiting the possible Access-Control-Allow-Origin values to a set of allowed origins requires code on the server side to check the value of the Origin request header, compare that to a list of allowed origins, and then if the Origin value is in the list, set the Access-Control-Allow-Origin value to the same value as ...
It looks like CORS is to blame. Picasa's header responses differ between those two requests. It succeeds when they include access-control-allow-origin:*.
Picasa includes it in: https://picasaweb.google.com/data/entry/base/user/114476218463019618611?alt=json&hl=en_US
But not in: https://picasaweb.google.com/data/entry/base/user/114476218463019618611/albumid/5750459375839674337?alt=json&hl=en_US
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
