javascript - Access-Control-Allow-Origin 不允许 Origin http://127.0.0.1答案

【问题标题】：javascript - Origin http://127.0.0.1 is not allowed by Access-Control-Allow-Originjavascript - Access-Control-Allow-Origin 不允许 Origin http://127.0.0.1
【发布时间】：2012-06-09 02:01:29
【问题描述】：

我正在制作一个简单的画廊，它使用 html + javascript 从 picasa 帐户中获取照片。

首先，获取相册列表，然后对于每个相册，获取照片列表。第一个查询工作正常，但其他查询在浏览器 (Chrome) 中返回此错误：

GET https://picasaweb.google.com/data/entry/base/user/114476218463019618611/albumid/5750459375839674337?alt=json&hl=en_US 404（未找到）jquery.js:8240 XMLHttpRequest 无法加载 https://picasaweb.google.com/data/entry/base/user/114476218463019618611/albumid/5750459375839674337?alt=json&hl=en_US。 Access-Control-Allow-Origin 不允许使用原始文件：//。

这是代码：

           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,
                    });
            }

谢谢。

编辑：

我注意到如果我删除该行：

                            + "/albumid/"   +   album_ID

有效（当然，没有预期的响应）。

【问题讨论】：

尝试使用 JSONP 代替 json 进行跨域 ajax 调用
这是一个适用于 jsFiddle 的 JSONP 版本：jsfiddle.net/XsfNE。不过，不确定这是否意味着它可以在本地工作。（我使用了在 Internet 上找到的随机 ID，因为您的 URL 是 404。）

标签： javascript jquery google-chrome picasa

【解决方案1】：

看来CORS 是罪魁祸首。 Picasa 的标头响应在这两个请求之间有所不同。当它们包含access-control-allow-origin:* 时，它会成功。

Picasa 将其包含在：https://picasaweb.google.com/data/entry/base/user/114476218463019618611?alt=json&hl=en_US

但不在：https://picasaweb.google.com/data/entry/base/user/114476218463019618611/albumid/5750459375839674337?alt=json&hl=en_US

【讨论】：