错误：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'http://localhost:8000'答案

【问题标题】：Error: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access错误：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'http://localhost:8000'
【发布时间】：2014-10-08 22:21:15
【问题描述】：

我是 AJAX 调用的新手，我想模拟 rottentomatoes 搜索页面。我得到了正确的 JSON 文件，但它不会在我的浏览器上加载。我一直在研究并没有找到解决方案。任何帮助将不胜感激。

这是我的代码。

$(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

【问题讨论】：

您遇到了同源策略。见stackoverflow.com/questions/3076414/…。

标签： jquery ajax rotten-tomatoes

【解决方案1】：

您只需要调整 .ajax 即可使用 jsonp。

这里正在工作 jsfiddle http://jsfiddle.net/hvtz7kfv/2/

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

});

【讨论】：

我相信使用 jsonp，你只能获取，不能发布......所以对于这种情况，这应该可以正常工作，但 jsonp 不是完全绕过同源策略的答案......跨度>

【解决方案2】：

与其直接向烂番茄发送 ajax 请求，不如向您的服务器发送请求，让您的服务器将请求发送给烂番茄，然后将该响应转发回您的客户端。不过，我认为您不必使用公共 API 来做到这一点。

您在使用 Chrome 浏览器吗？我认为 Chrome 有一些涉及 CORS 和 localhost 的奇怪限制。

【讨论】：