javascript - Dealing with Origin http:localhost is not allowed by Access-Control-Allow-Origin Without CORS header - Stack Overfl

admin管理员组

文章数量:1317898

So I've got a simple getJSON() function:

            $.getJSON(apiURL, function(data) {
                 console.log('success');
                if (data.results.length > 0) {
                    $(song).find('source').attr('src', data.results[0].previewUrl);
                    song.play();
                }
                else {
                    console.log('No match found for track information specified.');
                }
            });

apiURL is an itunes API url, defined like this:

            var apiURL =" " +
                "?term=" + artist + "+" + album + "+" + title +·
                "&media=music&entity=musicTrack&callback=?";

I'm getting the classic Origin localhost is not allowed by Access-Control-Allow-Origin error. I've dug for some answers on this, and they usually boil down to either using $.ajax and setting the dataType to 'jsonp', or using .getJSON and supplying a 'callback=?' parameter to the URL, which I've tried above. Neither of those seem to be working, and I've heard rumblings that they may be outdated. What is the most current, up to date advise on dealing with this problem? Besides collecting the data on the server.

So I've got a simple getJSON() function:

            $.getJSON(apiURL, function(data) {
                 console.log('success');
                if (data.results.length > 0) {
                    $(song).find('source').attr('src', data.results[0].previewUrl);
                    song.play();
                }
                else {
                    console.log('No match found for track information specified.');
                }
            });

apiURL is an itunes API url, defined like this:

            var apiURL =" https://itunes.apple./search" +
                "?term=" + artist + "+" + album + "+" + title +·
                "&media=music&entity=musicTrack&callback=?";

I'm getting the classic Origin localhost is not allowed by Access-Control-Allow-Origin error. I've dug for some answers on this, and they usually boil down to either using $.ajax and setting the dataType to 'jsonp', or using .getJSON and supplying a 'callback=?' parameter to the URL, which I've tried above. Neither of those seem to be working, and I've heard rumblings that they may be outdated. What is the most current, up to date advise on dealing with this problem? Besides collecting the data on the server.

• javascript
• jquery
• ajax
• json

Share Improve this question Follow asked Oct 18, 2013 at 21:12 user1427661user1427661 11.8k3131 gold badges9595 silver badges133133 bronze badges 4

• without a cors header, not possible without using a server-side proxy, unless the remote api supports JSONP. – Kevin B Commented Oct 18, 2013 at 21:15
• Is it possible to add a CORS header using jQuery? Also, the iTunes API appears to support JSONP, discussing the 'callback=?' parameter in its documentation, but I still get that error.... – user1427661 Commented Oct 18, 2013 at 21:21
• No, cors headers must be added by the server. – Kevin B Commented Oct 18, 2013 at 21:51
• so $.support.cors = true won't work ? – Lavinia Andreea Cojocaru Commented Oct 18, 2013 at 21:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You have a space at the beginning of your api url... once I removed that, the call went through:

http://jsfiddle/UU8tT/

var apiURL = "https://itunes.apple./search" +

Try using the full .ajax method, rather than the .getJSON shorthand method:

var terms = ["Halestorm"];
terms.forEach(function (val, i, arr) {
    terms[i] = encodeURIComponent(val);
});
$.ajax({
    "url": "https://itunes.apple./search",
    "dataType": "jsonp",
    "data": {
        "term": terms.join('+'),
        "media": "music",
        "entity": "musicTrack"
    },
    "error": function (jqXHR, textStatus, message) {
        console.log(message);
    },
    "success": function (data, textStatus, jqXHR) {
        console.log(data);
    }
});

The above works for me in the browser console (while on stackoverflow). It also works on jsFiddle: http://jsfiddle/xYthU/

Browser will request server with OPTIONS method. Server has to response following headers to support CORS.

1. Access-Control-Allow-Headers : Accept
2. Access-Control-Allow-Methods : *
3. Access-Control-Allow-Origin : *

If we request https://itunes.apple./search URL with OPTIONS method. It responses with error that not Supported.

Screenshot: https://blog.gaurangjadia./wp-content/uploads/2013/10/itunes.apple_._.png

本文标签：