Происхождение http://localhost не разрешено Access-Control-Allow-Origin.?

У меня проблема... я пытаюсь получить json api в " http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json"

когда я пытаюсь в автономном режиме (это означает, что я копирую этот json API в блокноте и вызываю его в своем локальном хосте) с помощью этого кода...

function getLast(){
        $.ajax({
            url:"http://localhost/tickets/json/api_airport.json",
            type:'GET',
            dataType:"json",
            success:function(data){console.log(data.results.result[1].category);}
        });
    }

он отлично работает.:)

но когда я пытаюсь выполнить реальный url ( http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json") с помощью этого кода:

$.ajax({
            url:"http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json",
            type:'GET',
            crossDomain:true,
            beforeSend: function(x) {
                if(x && x.overrideMimeType) {
                    x.overrideMimeType("application/j-son;charset=UTF-8");
                }
            },
            success:function(data){console.log("Success");}
        });

то в моей консоли javascript Google Chrome появляется такая ошибка: "XMLHttpRequest не может загрузить http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json. Origin ( http://localhost) не разрешено Access-Control-Allow-Origin. "

Я знаю, это должна быть проблема с перекрестными доменами, может кто-нибудь мне помочь? nb: некоторые фрагменты кода, я получил от сообщества.... спасибо:)

Ответ 1

У вас есть два способа продвижения вперед:

JSONP

Если этот API поддерживает JSONP, самый простой способ исправить эту проблему - добавить &callback в конец URL-адреса. Вы также можете попробовать &callback=. Если это не сработает, это означает, что API не поддерживает JSONP, поэтому вы должны попробовать другое решение.

Прокси Script

Вы можете создать прокси-сервер script в том же домене, что и ваш веб-сайт, чтобы избежать проблем с перекрестным происхождением. Это будет работать только с URL-адресами HTTP, а не с URL-адресами HTTPS, но это не должно быть слишком сложно изменить, если вам это нужно.

<?php
// File Name: proxy.php
if (!isset($_GET['url'])) {
    die(); // Don't do anything if we don't have a URL to work with
}
$url = urldecode($_GET['url']);
$url = 'http://' . str_replace('http://', '', $url); // Avoid accessing the file system
echo file_get_contents($url); // You should probably use cURL. The concept is the same though

Затем вы просто вызываете этот script с помощью jQuery. Обязательно urlencode URL.

$.ajax({
    url      : 'proxy.php?url=http%3A%2F%2Fapi.master18.tiket.com%2Fsearch%2Fautocomplete%2Fhotel%3Fq%3Dmah%26token%3D90d2fad44172390b11527557e6250e50%26secretkey%3D83e2f0484edbd2ad6fc9888c1e30ea44%26output%3Djson',
    type     : 'GET',
    dataType : 'json'
}).done(function(data) {
    console.log(data.results.result[1].category); // Do whatever you want here
});

Почему

Вы получаете эту ошибку из-за той же политики происхождения XMLHttpRequest, которая в основном сводится к ограничению аякс-запросов к URL-адресам с другим портом, доменом или протоколом. Это ограничение существует для предотвращения атак межсайтового скриптинга (XSS).

Дополнительная информация

Наши решения передают эти проблемы по-разному.

JSONP использует возможность указывать теги script в JSON (завернутые в функцию javascript), чтобы получить JSON. Страница JSONP интерпретируется как javascript и выполняется. JSON передается вашей указанной функции.

Прокси script работает, обманывая браузер, так как вы на самом деле запрашиваете страницу с тем же именем, что и ваша страница. Фактические запросы перекрестного происхождения выполняются на стороне сервера.

Ответ 2

Я исправил это (для разработки) простым прокси nginx...

# /etc/nginx/sites-enabled/default
server {
  listen 80;
  root /path/to/Development/dir;
  index index.html;

  # from your example
  location /search {
    proxy_pass http://api.master18.tiket.com;
  }
}

Ответ 3

подробное чтение перекрестного домена jQuery AJAX, похоже, указывает на то, что сервер, на который вы запрашиваете, возвращает строку заголовка, которая запрещает междоменные запросы json. Проверьте заголовки ответа, который вы получаете, чтобы узнать, установлен ли заголовок Access-Control-Allow-Origin, и не ограничивает ли его значение междоменные запросы локальному хосту.