Error: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access

Question

I am new to AJAX calls and I would like to mock up the rottentomatoes search page. I'm getting the correct JSON file but it won't load on my browser. I have been researching and have not found a solution. Any help would be appreciated.

Here is my code.

$(document).ready(function() {
  var apikey = "qvq7jf4n29fv8m8pxqqyxsxg";
  var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
  var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;

 $('form').submit(function (evt) {
    var $submitButton = $('#submit');
    var $searchField = $('#search');
    evt.preventDefault();
    $searchField.prop("disabled",true);
    $submitButton.attr("disabled", true).val("searching....");
    var query = $searchField.val();
    var rotten = moviesSearchUrl + '&q=' + encodeURI(query);

    $.ajax(rotten,

    function(data){

      if (data.items.length > 0) {
        $.each(data.items,function(i,movie) {
          movieHTML += '<li class="grid-25 tablet-grid-50">';
          movieHTML += '<a href="' + movie.title + '" class="image">';
          movieHTML += '<img src="' + movie.posters.original + '"></a></li>';
        }); // end each
      } else {
        movieHTML = "<p>No photos found that match: " + animal + ".</p>"
      }
      $('#movies').html(movieHTML);
      $searchField.prop("disabled", false);
      $submitButton.attr("disabled", false).val("Search");
    }); // end getJSON

  }); // end click

}); // end ready

You are running into the same-origin policy. See http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy. — sushain97, Oct 08 '14 at 22:28

score 3 · Accepted Answer · answered Oct 09 '14 at 00:18

3

You just needed to tweak .ajax to use jsonp.

Here is working jsfiddle http://jsfiddle.net/hvtz7kfv/2/

 $.ajax({
     dataType: "jsonp",
     url:  rotten,   
     success: searchCallback

});

answered Oct 09 '14 at 00:18

Beckafly

411
2
5

I believe using jsonp, you can only get, not post... So for this scenario this should be work fine, but jsonp is not the answer to bypass same origin policy completely... – Giridhar Karnik Dec 21 '15 at 04:03

score 0 · Answer 2 · answered Oct 08 '14 at 23:45

Instead of sending an ajax request directly to rotten tomatoes, send a request to your server, have your server send the request to rotten tomatoes, and then relay that response back to your client. I don't think you should have to do that with a public API though.

Are you using Chrome? I think Chrome has some weird restrictions involving CORS and localhost.

Error: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access

2 Answers2