Javascript 无法提取 JSON 响应

Question

我相信代码没问题(否则请告诉我)。我的问题与 API URL 和可能的 header 有关。在我下面的代码中，isError 函数一直被触发，让我相信我根本没有得到响应。我已经在 postman 中检查了这个 API URL，并且得到了成功的响应。

代码:

            //load Flickr Photos through their API
            $(document).ready(function() {
                getFlickrJSON();
            });

            function getFlickrJSON () {
                $.ajax({
                    method: 'GET',
                    url: 'https://api.flickr.com/services/feeds/photos_public.gne',
                    data: {
                        format: "json"
                    },
                    dataType: 'json',
                    success: onSuccess,
                    error: onError
                })
            }

            function onSuccess(jsonReturn) {
                var fadeInT = 1000;

                for(var i = 0; i<jsonReturn.data.children.length; i++) {

                    var items = jsonReturn.data.items[i].data;
                    var photo = [];
                    var photoTitle = items.title;
                    var author = [];
                    var description = [];
                    var tags = [];

                    var loadthis = 
                        "<p class='photoTitle'>" + photoTitle + "</p>";
                    $(loadthis).hide().appendTo($('.photo_tile')).fadeIn(fadeInT);
                }
                console.log('success');
            }

            //if JSON fails
            function onError(){
                $('.photo_tile').html('No data found');
                console.log('error');
            }

    //Response

    jsonFlickrFeed({
        "title": "Uploads from everyone",
        "link": "https:\/\/www.flickr.com\/photos\/",
        "description": "",
        "modified": "2018-11-15T09:38:29Z",
        "generator": "https:\/\/www.flickr.com",
        "items": [{
            "title": "Port sainte-rose , \u00eele de la R\u00e9union",
            "link": "https:\/\/www.flickr.com\/photos\/156645216@N05\/30950648007\/",
            "media": {"m":"https:\/\/farm5.staticflickr.com\/4857\/30950648007_eec58dca53_m.jpg"},
            "date_taken": "2018-10-25T14:54:36-08:00",
            "description": " <p><a href=\"https:\/\/www.flickr.com\/people\/156645216@N05\/\">Nellouille974<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/156645216@N05\/30950648007\/\" title=\"Port sainte-rose , \u00eele de la R\u00e9union\"><img src=\"https:\/\/farm5.staticflickr.com\/4857\/30950648007_eec58dca53_m.jpg\" width=\"240\" height=\"240\" alt=\"Port sainte-rose , \u00eele de la R\u00e9union\" \/><\/a><\/p> ",
            "published": "2018-11-15T09:38:29Z",
            "author": "nobody@flickr.com (\"Nellouille974\")",
            "author_id": "156645216@N05",
            "tags": ""
       },
       {
            "title": "[New post] Design Baju Korporat Vector",
            "link": "https:\/\/www.flickr.com\/photos\/48423781@N04\/30950648667\/",
            "media": {"m":"https:\/\/farm5.staticflickr.com\/4871\/30950648667_5f5837059f_m.jpg"},
            "date_taken": "2018-11-15T01:38:32-08:00",
            "description": " <p><a href=\"https:\/\/www.flickr.com\/people\/48423781@N04\/\">Fadzil Aripin<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/48423781@N04\/30950648667\/\" title=\"[New post] Design Baju Korporat Vector\"><img src=\"https:\/\/farm5.staticflickr.com\/4871\/30950648667_5f5837059f_m.jpg\" width=\"32\" height=\"32\" alt=\"[New post] Design Baju Korporat Vector\" \/><\/a><\/p> <p>via Creeper Design 03 6143 5225 <a href=\"https:\/\/ift.tt\/2Puetac\" rel=\"nofollow\">ift.tt\/2Puetac<\/a><\/p>",
            "published": "2018-11-15T09:38:32Z",
            "author": "nobody@flickr.com (\"Fadzil Aripin\")",
            "author_id": "48423781@N04",
            "tags": "new post design baju korporat vector"
       }]
    })

Answer 1

您面临的问题是 CORS ，您可以使用 chrome 扩展或在 ajax 请求中欺骗它

$.ajax({
     method: 'GET',
     url: 'https://cors-anywhere.herokuapp.com/https://api.flickr.com/services/feeds/photos_public.gne?format=json',
     "headers": {
        "origin": "https://flickr.com",
     },
     success : function(res){
        console.log(res)
     }
})

这将欺骗您的请求，但请注意，设置 header “来源”是不安全的

希望对您有所帮助。