Access-Control-Allow-Origin-localhost

у меня проблемы с получением json через ajax, ошибка ниже. Согласно информации, которую я нашел до сих пор относительно ошибки, это, похоже, какая-то междоменная проблема, но я понятия не имею, что это значит и как ее решить.

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

при обращении url непосредственно в браузере отображается действительный json, так что это не должно быть проблемой.

как это можно решить?

Примечание: url-адрес идет на сервер Apache, а не файл, который был в случае 95% вопросов здесь в стеке, которые я читал об этой проблеме.

ошибка в инспекторе:

XMLHttpRequest cannot load http://localhost/api/v1/products?_=1355583847077.
Origin null is not allowed by Access-Control-Allow-Origin.
Error: error

код:

    $.ajaxSetup ({
      url: "http://localhost/api/v1/products", // <--- returns valid json if accessed in the browser
      type: "GET",
      dataType: "json",
      cache: false,
      contentType: "application/json"
    })
    $.ajax({
        success: function(data){

            console.log("You made it!");
        },
        error: function(xhr) {
           console.log("Error: " + xhr.statusText);
       }
    }).done(function(data){
        console.log(data);
    })

Params

_ 1355583610778

заголовки

Заголовки Ответа:

Connection  Keep-Alive
Content-Length  3887
Content-Type    application/json
Date    Sat, 15 Dec 2012 14:50:53 GMT
Keep-Alive  timeout=5, max=100
Server  Apache/2.2.14 (Unix) DAV/2 mod_ssl/2.2.14 OpenSSL/0.9.8l PHP/5.3.1 mod_perl/2.0.4 Perl/v5.10.1
X-Powered-By    PHP/5.3.1

Запрос Заголовков:

Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language sv-SE,sv;q=0.8,en-US;q=0.5,en;q=0.3
Connection  keep-alive
Host    localhost
Origin  null
User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:17.0) Gecko/17.0 Firefox/17.0

ответ

ничего здесь...

9
ajax api http-headers jquery json

5 ответов

попробуйте реализовать некоторую форму JSONP механизм. Если вы используете PHP, это может быть что-то простое...

/* If a callback has been supplied then prepare to parse the callback
 ** function call back to browser along with JSON. */
$jsonp = false;
if ( isset( $_GET[ 'callback' ] ) ) {
    $_GET[ 'callback' ] = strip_tags( $_GET[ 'callback' ] );
    $jsonp              = true;

    $pre  = $_GET[ 'callback' ] . '(';
    $post = ');';
} //isset( $_GET[ 'callback' ] )

/* Encode JSON, and if jsonp is true, then ouput with the callback
 ** function; if not - just output JSON. */
$json = json_encode( /* data here */ );
print( ( $jsonp ) ? $pre . $json . $post : $json );

все это будет делать, это проверить на $_GET дисп назвал обратный звонок, а затем оберните вывод в вызов функции-принимая $_GET['callback'] name как имя функции.

тогда ваш вызов AJAX становится чем-то вроде этого...

$.ajax({
  type: 'GET',
  url: '/* script here */ ', 
  data: /* data here - if any */,
  contentType: "jsonp", // Pay attention to the dataType/contentType
  dataType: 'jsonp', // Pay attention to the dataType/contentType
  success: function (json) {
    /* call back */
  }
});

когда jQuery дается 'jsonp' как тип данных / contentType это будет позаботьтесь о предоставлении вам имени функции обратного вызова - и настройке функции обратного вызова и т. д.; Это означает, что вам не нужно ничего делать!

из документации jQuery:

"jsonp": загружается в блок JSON с помощью JSONP. Добавляет дополнительный "?обратного вызова=?"до конца вашего URL, чтобы указать обратный вызов. Отключает кэширование, добавляя параметр строки запроса "_=[TIMESTAMP] " к URL-адресу, если параметр кэша не имеет значения истинный.

источник

в заключение; JSONP будет вашим лучшим выбором - я включил PHP-код в вероятность того, что ваш скрипт на стороне сервера использует PHP; если нет, то принципы те же. Однако материал jQuery/client остается неизменным независимо от технологий на стороне сервера. (в общем)

удачи :)

7

Да, это определенно междоменная проблема. Но не волнуйтесь, есть два решения этой проблемы.

использование JSONP

вы можете реализовать поддержку JSONP (JSON с дополнением) на сервере (т. е. решение Фергуса Морроу). JSONP работает в междоменном вне коробки и в основном JSON дополняется вызовом функции.

в своем .ajaxSetup set dataType to jsonp, а затем на стороне сервера, вы должны обязательно проверить параметр url-адреса имени callback в запросе. Если этот параметр установлен, ответ JSON должен быть дополнен соответствующим образом.

parseThis({ "json": "can", "be": "put", "in": "here" });

выше предполагает callback установлено значение parseThis. jQuery будет по умолчанию указывается имя функции, но вы можете переопределить это значение jsonpCallback в своем .ajaxSetup.

вы также можете использовать ярлык, чтобы сообщить jQuery, что вы запрашиваете JSONP, просто добавив ?callback=? к url-адресу запроса.

используя Access-Control-Allow-Origin

альтернативным решением является установка Access-Control-Allow-Origin заголовок в вашем ответе.

Access-Control-Allow-Origin: *

вышеуказанное позволит любой ресурс для использования междоменного сервиса. Прочтите статью, связанную ниже, для получения дополнительной информации о том, как настроить Access-Control-Allow.

если вы хотите узнать больше о Access-Control-Origin и CORS, я рекомендую эта статья о MDN.

20

Я решил это очень простым способом, добавив следующий заголовок к моему коду сервера (php):

header('Access-Control-Allow-Origin: *');
7

Если это ASP.NET веб-приложение, то вы также можете поместить это в свой глобальный.aspx:

HttpContext.Текущий.Ответ.AddHeader ("Access-Control-Allow-Origin","*");

3

дополнительные настройки заголовка PHP

header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type');

Удачи

2