Ошибка перекрестного домена XMLHttpRequest

Question

Я создал API для голосования для сайта для зарегистрированных сайтов.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    <script type="text/javascript"> 

     var id = 1; 

     $(document).ready(function(){ 
      $.getJSON("http://mysite.com/index.php?page=vote", { id: id, hasVoted: 'unknown' }, function(data) { 
       if(data == 2) { 
        window.location.replace("http://mysite.com/index.php?page=vote&id=" + id); 
       } 
      }); 
     }); 

    </script> 

В принципе, я даю идентификатор пользователя, а затем они помещают этот код в свои файлы. Сайт возвращает номер, и после этого он перенаправляет пользователя или не голосует.

Таким образом, тестирование на локальный этот код выдает эту ошибку:

XMLHttpRequest cannot load http://mysite.com/index.php?page=vote&id=1&hasVoted=unknown. Origin http://localhost is not allowed by Access-Control-Allow-Origin. 

Если я использую этот код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    <script type="text/javascript"> 

     var id = 1; 

     $(document).ready(function(){ 
      $.getJSON("http://mysite.com/index.php?page=vote&callback=?", { id: id, hasVoted: 'unknown' }, function(data) { 
       if(data == 2) { 
        window.location.replace("http://mysite.com/index.php?page=vote&id=" + id); 
       } 
      }); 
     }); 

    </script> 

Тогда он ничего не делает. Это не вызывает ошибок. (Хотя данные должны быть равны 2 (при прямом проверке этого URL он возвращает 2)).

И, если я попытаюсь сделать небольшой тест и сделаю alert(data); Он ничего не выбрасывает.

Я совершенно не знаю об этом. Все поможет.

Answer 1

Хорошо известная проблема, контроль происхождения браузера:

браузер не позволяет сделать AJAX запросы «кросс-происхождение» областей по умолчанию. Перекрестное происхождение означает, что либо порт, либо хост различны. Поэтому вы не можете отправлять запросы на сайт http://siteB/, пока скрипт для размещения запросов размещен на сайте A.

Простым решением было бы разместить все на одном домене и сделать URL-адрес относительно. Если это невозможно, вам нужно найти другой способ, чтобы не делать перекрестные вызовы. Некоторые примеры:

1. JSONP (только GET)
2. CORS (работа очень хорошо с современным браузером)
3. включают ifram + использовать PostMessage между окнами
4. прокси-скрипт

EDIT: Что бы я сделал, сначала позвольте вашему API-SERVER некоторым вещам, установив эти заголовки:

header("Access-Control-Allow-Origin: *"); 
header("Access-Control-Allow-Methods: POST, GET, OPTIONS"); 
header("Access-Control-Allow-Headers: Authorization"); 

Помните, что это не работает должным образом с Internet Explorer, поэтому вам необходимо использовать: XDomainRequest. Но это не позволяет отправлять заголовки. Пожалуйста, см. my question пару дней назад, если вам нужно отправить заголовки кросс-происхождение