jQuery $.ajax запускается как локальный файл HTML, избегая SOP (та же политика происхождения)

Я создал файл HTML foo.html со следующим содержанием:

  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script> 
      $.ajax({url:"http://foo.com/mdata",
        error: function (results) {
          alert("fail");
        },
        success: function (result) {
          alert("sucesses");
        }
      });
    </script>

Когда я загружаю этот HTML-файл в веб-браузер, он всегда показывает диалоговое окно с ошибкой.

  1. Есть идеи, почему это происходит?
  2. Также, каков наилучший способ отладки этого?

PS:

Предположим, что http://foo.com/mdata является допустимым путем веб-службы.

EDIT # 1

Решение

Подобный код прекрасно работал со мной, используя $.getJson http://jsfiddle.net/dpant/EK3W8/

я также сохранил содержимое в виде файла.html, и запрос от file:// к веб-службе также, кажется, работает.

<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="images">

</div>
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });</script>

</body>
</html>

Похоже, что большинство браузеров поддерживает CROS, поэтому вы можете написать скрипт, сохранить его как.html и открыть его в браузере, и он успешно выполнит Ajax-запрос *при условии, что сервер, который вы делаете запрос, поддерживает его *. В этом случае мой веб-сервер (служба) не поддерживает CROS (и конфигурация Apache по умолчанию его не поддерживает).

Многие веб-сервисы включили CROS, например, http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=? следовательно, запрос проходит успешно.

Несколько ссылок:

http://enable-cors.org/

https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing

3 ответа

Это всегда терпит неудачу по двум причинам:

  • Вам нужен веб-сервер, который отвечает на ваш запрос (200 = успех, 404, то есть ошибка), в Linux его можно легко настроить, в Windows и Mac посмотрите на Bitnami.
  • Вы не можете позвонить в другой домен через AJAX. Если вы запускаете свой скрипт на www.example.com, вы не можете запросить www.example.net. Посмотрите на ту же политику происхождения.

На самом деле мы пытаемся отправить запрос AJAX через домены, чтобы это произошло. Я пробовал этот код. на моей машине это показывает успех.

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script> 
    $.support.cors = true;
      $.ajax({url:"http://www.google.co.in/",
        error: function (xhr, ajaxOptions, thrownError) {

            alert("fail");
            alert(xhr.status);
            alert(thrownError);
       },
        success:function(result){
              alert("sucesses");
        }
      });

    </script>

Код отлично работает с добавлением строки $.support.cors=true, это определенно будет работать для вас.

Как я понял, в Сценариях контента вы не можете делать какие-либо междоменные XHR. Вы должны сделать это на странице расширения, такой как Фон, Всплывающее окно или даже Параметры, чтобы сделать это.

Дополнительную информацию об ограничении сценариев содержания см. На странице " Сценарии содержания" в Руководстве разработчика Google.

А для получения дополнительной информации об ограничении xhr, пожалуйста, обратитесь к странице XHR.

Другие вопросы по тегам