XMLHTTPREQUEST Ошибка: Origin Null не допускается до Access-Control-repute-Procent

StackOverflow https://stackoverflow.com/questions/3595515

Вопрос

Я разрабатываю страницу, которая тянет изображения из Flickr и Panoramio через поддержку jQuery ajax.

Сторона Flickr работает нормально, но когда я пытаюсь $.get(url, callback) От панорамио я вижу ошибку в консоли Chrome:

XMLHTTPREQUEST не может загрузить http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummy Key&tag=test&offset=0&length=20&callback=processimages&minx=-30&miny=0&maxx=0&maxy=150.. Отказ Происхождение NULL не допускается путем доступа-контроля-разрешения.

Если я запрашиваю этот URL из браузера напрямую, работает нормально. Что происходит, и я могу обойти это? Я неправильно сочиняю свой запрос, или это то, что панорамно делает, чтобы помешать тому, что я пытаюсь сделать?

Google не появился никаких полезных совпадений на сообщение об ошибке.

РЕДАКТИРОВАТЬ

Вот какой-то пример код, который показывает проблему:

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';

  $.get(url, function (jsonp) {
    var processImages = function (data) {
      alert('ok');
    };

    eval(jsonp);
  });
});

Ты сможешь Запустите пример онлайн.

Редактировать 2.

Благодаря Дарину за его помощь с этим. Вышеуказанный код неверный. Используйте это вместо этого:

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';

  $.get(url, function (data) {
    // can use 'data' in here...
  });
});
Это было полезно?

Решение

Для записи, насколько я могу сказать, у вас были две проблемы:

  1. Вы не проходили спецификатор типа «JSONP» в свой $.get, Так что он использовал обычный XMLHTTPREQUEST. Однако ваш браузер поддерживал CORS (общий ресурс по перекрестному происхождению ресурсов), чтобы позволить кросс-домен XMLHTTPREQUEST, если сервер закинул его. Вот где Access-Control-Allow-Origin Заголовок вошел.

  2. Я считаю, что вы упомянули, что вы управляете его из файла: // URL. Есть два способа для заголовков CORS сигнализируют, что кросс-домен XHR в порядке. Один должен отправить Access-Control-Allow-Origin: * (который, если вы достигли Flickr через $.get, они должны были делать), в то время как другой должен был отозвать содержание Origin заголовок Однако, file:// URL производит нуль Origin который не может быть авторизован через эхо обратно.

Первый был решен в обручке договора Дарина, чтобы использовать $.getJSON. Отказ Он делает немного магии, чтобы изменить тип запроса из своего значения по умолчанию «JSON» на «JSONP», если он видит подстроку callback=? в URL.

Который решил второй, больше не пытается выполнить запрос CORS из file:// Ур

Чтобы уточнить для других людей, вот простые инструкции по устранению неполадок:

  1. Если вы пытаетесь использовать JSONP, убедитесь, что один из нижеперечислен:
    • Вы используете $.get и установить dataType к jsonp.
    • Вы используете $.getJSON и включен callback=? в URL.
  2. Если вы пытаетесь сделать перекрестный домен XMLHTTPREQUEST через CORS ...
    1. Убедитесь, что вы тестируете через http://. Отказ Сценарии, работающие через file:// иметь ограниченную поддержку для CORS.
    2. Убедитесь, что браузер на самом деле поддерживает CORS.. Отказ (Opera и Internet Explorer опаздывают на вечеринку)

Другие советы

Вам нужно, возможно, добавить заголовок в свой Script, вот что мне пришлось сделать в PHP:

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

Подробнее Перекрестный домен AJAX OU Услуги Веб (На французском).

Для простого HTML-проекта:

cd project
python -m SimpleHTTPServer 8000

Затем просмотрите свой файл.

Работает для меня в Google Chrome V5.0.375.127 (я получаю предупреждение):

$.get('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
    alert(json.photos[1].photoUrl);
});

Также я бы порекомендовал вам использовать $.getJSON() Метод вместо предыдущего не работает на IE8 (хотя бы на моей машине):

$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150', 
function(json) {
    alert(json.photos[1].photoUrl);
});

Вы можете попробовать это онлайн отсюда.

ОБНОВИТЬ:

Теперь, когда вы показали свой код, я могу увидеть проблему с ним. У вас есть как анонимная функция, так и встроенная функция, но оба будут называться processImages. Отказ Вот как работает поддержка JSONP JSONP jQuery. Обратите внимание, как я определяю callback=? Так что вы можете использовать анонимную функцию. Вы можете прочитать больше об этом в документации.

Другое замечание состоит в том, что вы не должны звонить Eval. Параметр, передаваемый в вашу анонимную функцию, уже будет проанализирован в JSON jQuery.

Пока запрошенный сервер поддерживает формат данных JSON, используйте интерфейс JSONP (JSON). Это позволяет сделать запросы на внешние домена без прокси-серверов или модных вещей заголовков.

Это та же политика происхождения, вы должны использовать интерфейс JSON-P или прокси, работающий на одном хосте.

Нам удалось это через http.conf Файл (отредактированный, а затем перезагрузил HTTP Service):

<Directory "/home/the directory_where_your_serverside_pages_is">
    Header set Access-Control-Allow-Origin "*"
    AllowOverride all
    Order allow,deny
    Allow from all
</Directory>

в Header set Access-Control-Allow-Origin "*", Вы можете поставить точный URL.

Если вы делаете локальные тестирования или вызовете файл из чего-то вроде file:// Тогда вам нужно отключить безопасность браузера.

На Mac:open -a Google\ Chrome --args --disable-web-security

В моем случае тот же код работал нормально на Firefox, но не на Google Chrome. Консоль JavaScript Google Chrome сказал:

XMLHttpRequest cannot load http://www.xyz.com/getZipInfo.php?zip=11234. 
Origin http://xyz.com is not allowed by Access-Control-Allow-Origin.
Refused to get unsafe header "X-JSON"

Мне пришлось упасть на WWW часть URL AJAX, чтобы он правильно совпадал с URL-адресом происхождения, и он работал нормально.

Не все серверы поддерживают JSONP. Требуется сервер для установки функции обратного вызова в результатах. Я использую это, чтобы получить ответы JSON с сайтов, которые возвращают чистые JSON, но не поддерживают JSONP:

function AjaxFeed(){

    return $.ajax({
        url:            'http://somesite.com/somejsonfile.php',
        data:           {something: true},
        dataType:       'jsonp',

        /* Very important */
        contentType:    'application/json',
    });
}

function GetData() {
    AjaxFeed()

    /* Everything worked okay. Hooray */
    .done(function(data){
        return data;
    })

    /* Okay jQuery is stupid manually fix things */
    .fail(function(jqXHR) {

        /* Build HTML and update */
        var data = jQuery.parseJSON(jqXHR.responseText);

        return data;
    });
}

Я использую Server Apache, поэтому я использовал модуль MOD_PROXY. Включить модули:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

Затем добавьте:

ProxyPass /your-proxy-url/ http://service-url:serviceport/

Наконец, пропустите Proxy-Url к вашему сценарию.

Как окончательная записка Мозилла документация явно говорит это

Приведенный выше пример не удается, если заголовок был подстановлен подстановочным, как: Access-Control-Allow-Origin: *. С момента доступа-контроля - разрешение доступа явно упоминает http: //foo.example., CONDIALIZANT COGNIZANT CONTENTRED возвращается в вызовов веб-контента.

Как следствие не просто плохая практика для использования «*». Просто не работает :)

Я также получил ту же ошибку в Chrome (я не проверил другие сроки). Это было связано с тем, что я навигацию на domain.com вместо www.domain.com. Немного странно, но я мог решить проблему, добавив следующие строки к .htaccess. Он перенаправляет domain.com на www.domain.com, и проблема была решена. Я ленивый веб-посетитель, поэтому я почти никогда не вводим www, но, по-видимому, в некоторых случаях требуется.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]

Убедитесь, что вы используете последнюю версию jQuery. Мы столкнулись с этой ошибкой для jQuery 1.10.2, и ошибка была решена после использования jQuery 1.11.1

Близкие,

Я столкнулся с подобной проблемой. Но с помощью Fiddler я смог попасть по этому вопросу. Проблема в том, что клиентский URL-адрес, который сконфигурирован в реализации CORS на стороне Web API, не должен иметь трейлинг вперед-слез. После отправки вашего запроса через Google Chrome и проверьте TextView. вкладка Заголовки Раздел Fiddler, сообщение об ошибке утверждает что-то вроде этого:

* «Указанное происхождение политики Your_client_URL: / 'неверно. Это не может заканчиваться вперед стренкой ».

Это настоящий причудливый, потому что он работал без каких-либо проблем в Internet Explorer, но дал мне головную боль при тестировании с помощью Google Chrome.

Я удалил прядильник в коде CORS и перекомпилировал веб-API, и теперь API доступен через Chrome и Internet Explorer без каких-либо проблем. Пожалуйста, дайте это выстрел.

Спасибо, Энди

Есть небольшая проблема в решении CodeGrovover выше , где, если вы измените файл, вам придется перезапустить сервер, чтобы фактически использовать обновленный файл (по крайней мере, в моем случае).

Так что ищу немного, я нашел Вот этот Использовать:

sudo npm -g install simple-http-server # to install
nserver # to use

И тогда это будет служить в http://localhost:8000.

Для PHP - это работа для меня на хрома, сафари и Firefox

https://w3c.github.io/webappsec-cors-for-developers/#avoid-orturning-access-control-allow-origin-null.

header('Access-Control-Allow-Origin: null');

Использование Axios Call PHP Live Services с файлом: //

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top