Помилка XmlHttpRequest: Null Origin не дозволено Access-Control-Allow-Origin

Я розробляю сторінку, яка витягує зображення з Flickr та Panoramio через підтримку AJAX jQuery.

Сторона Flickr працює чудово, але коли я намагаюся перейти $.get(url, callback)з Panoramio, я бачу помилку в консолі Chrome:

XMLHttpRequest не може завантажити 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 . Origin null не дозволяється Access-Control-Allow-Origin.

Якщо я запитую цю URL-адресу у веб-переглядача, вона працює добре. Що відбувається, і чи можу я обійти це? Чи складаю я запит неправильно, чи це щось, що робить Panoramio, щоб перешкоджати тому, що я намагаюся зробити?

Google не виявив корисних збігів у повідомленні про помилку .

EDIT

Ось приклад коду, який показує проблему:

$().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);
  });
});

Ви можете запустити приклад в Інтернеті .

EDIT 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 (Cross-Origin Resource Sharing), щоб дозволити міждоменний 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://URL.

Щоб уточнити для інших людей, ось прості інструкції з усунення несправностей:

1. Якщо ви намагаєтесь використати JSONP, переконайтесь, що це одне з наступних дій:
   • Ви використовуєте $.getі встановити dataTypeв jsonp.
   • Ви використовуєте $.getJSONта включені callback=?в URL-адресу.
2. Якщо ви намагаєтеся зробити міждоменний XMLHttpRequest через CORS ...
   1. Переконайтесь, що ви тестуєте через http://. Сценарії, що працюють через, file://мають обмежену підтримку CORS.
   2. Переконайтесь, що браузер фактично підтримує CORS . (Opera і Internet Explorer спізнюються на вечірку)

Вам потрібно, можливо, додати HEADER у названий сценарій, ось що мені довелося зробити в PHP:

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

Детальніше у крос-доменній послузі AJAX ou WEB (французькою мовою).

Для простого 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. Ось так працює підтримка JQuery JSONP. Зверніть увагу, як я визначаю, callback=?щоб ви могли використовувати анонімну функцію. Детальніше про це ви можете прочитати в документації .

Ще одне зауваження полягає в тому, що не варто називати eval. Параметр, переданий вашій анонімній функції, буде вже проаналізований в JSON jQuery.

Поки запитуваний сервер підтримує формат даних JSON, використовуйте інтерфейс JSONP (JSON Padding). Це дозволяє робити зовнішні запити домену без проксі-серверів або фантазійних заголовків.

Це та сама політика походження , ви повинні використовувати інтерфейс JSON-P або проксі, що працює на тому ж хості.

Ми керували нею через http.confфайл (відредагували та перезапустили службу HTTP):

<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;
    });
}

Я використовую сервер 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/

Нарешті, передайте проксі-URL до свого сценарію.

На завершення документація Mozilla прямо говорить про це

Наведений вище приклад не вдасться, якщо заголовок було позначено як: Access-Control-Allow-Origin: *. Оскільки Access-Control-Allow-Origin прямо згадує http: //foo.example , вміст обліково -пізнавальних даних повертається до веб-вмісту, що викликає посилання.

Як наслідок, це не просто погана практика використовувати "*". Просто не працює :)

Для PHP - це робота для мене на Chrome, сафарі та firefox

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

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

використання служб живлення служб axios call php з файлом: //

Я також отримав таку ж помилку в Chrome (я не тестував інших веб-переглядачів). Це було пов’язано з тим, що я переміщався на domain.com замість www.domain.com. Трохи дивно, але я міг би вирішити проблему, додавши наступні рядки до .htaccess. Він перенаправляє domain.com на www.domain.com і проблема була вирішена. Я ледачий веб-відвідувач, тому майже ніколи не ввожу веб-сайт, але, мабуть, у деяких випадках це потрібно.

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

Люди,

Я зіткнувся з подібним питанням. Але за допомогою Фіддлера я зміг дійти до питання. Проблема полягає в тому, що клієнтська URL-адреса, налаштована в реалізації CORS на стороні Web API, не повинна мати кінцевої нахили вперед. Після подання запиту через Google Chrome та перегляду вкладки TextView розділу заголовків Fiddler, у повідомленні про помилку зазначено приблизно так:

* "Вказане походження політики your_client_url: / 'недійсне. Це не може закінчуватися косою косою переднім рядком."

Це справді химерно, тому що він працював без проблем у Internet Explorer, але приводив до головного болю при тестуванні за допомогою Google Chrome.

Я видалив косу рису в коді CORS і перекомпілював веб-API, і тепер API доступний через Chrome і Internet Explorer без проблем. Будь ласка, дайте нам це зробити.

Дякую, Енді

У рішенні, розміщеному CodeGroover вище , є невелика проблема , де, якщо ви зміните файл, вам доведеться перезапустити сервер, щоб фактично використовувати оновлений файл (принаймні, в моєму випадку).

Отож, пошукавши трохи, я знайшов цей для використання:

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

І тоді він буде служити в http://localhost:8000.