AJAX у Chrome надсилає опції замість GET / POST / PUT / DELETE?

Я працюю над внутрішнім веб-додатком на роботі. У IE10 запити працюють нормально, але в Chrome усі запити AJAX (яких існує багато) надсилаються за допомогою OPTIONS замість того, який визначений метод я даю. Технічно мої запити є "крос-доменом". Сайт розміщено на localhost: 6120, а сервіс, до якого я звертаюсь із запитами AJAX, знаходиться на 57124. Ця закрита помилка jquery визначає проблему, але не справжнє виправлення.

Що я можу зробити, щоб використовувати належний метод http у запитах ajax?

Редагувати:

Це в завантаженні документів кожної сторінки:

jQuery.support.cors = true;

І кожен AJAX побудований аналогічно:

var url = 'http://localhost:57124/My/Rest/Call';
$.ajax({
    url: url,
    dataType: "json",
    data: json,
    async: true,
    cache: false,
    timeout: 30000,
    headers: { "x-li-format": "json", "X-UserName": userName },
    success: function (data) {
        // my success stuff
    },
    error: function (request, status, error) {
        // my error stuff
    },
    type: "POST"
});

Chrome попередньо переглядає запит на пошук заголовків CORS . Якщо запит прийнятний, він надсилатиме реальний запит. Якщо ви робите цей крос-домен, вам просто доведеться зіткнутися з ним або ще знайти спосіб зробити запит немеждоменним. Ось чому помилка jQuery була закрита як виправлення. Це за дизайном.

На відміну від простих запитів (обговорених вище), "попередньо просвічені" запити спочатку надсилають HTTP-запит методом OPTIONS на ресурс іншого домену, щоб визначити, чи безпечний фактичний запит для надсилання. Запити між веб-сайтами попередньо відображаються таким чином, оскільки вони можуть мати значення для даних користувачів. Зокрема, попередньо перевіряється запит, якщо:

• Він використовує інші методи, ніж GET, HEAD або POST. Крім того, якщо POST використовується для надсилання даних запиту із типом вмісту, відмінним від application / x-www-form-urlencoded, multipart / data-data, або text / plain, наприклад, якщо POST-запит надсилає на сервер корисну навантаження XML використовуючи application / xml або text / xml, тоді запит попередньо просвічується.
• Він встановлює власні заголовки у запиті (наприклад, у запиті використовується заголовок, наприклад X-PINGOTHER)

Виходячи з того, що запит не надсилається на порт 80/443 за замовчуванням, цей виклик Ajax автоматично вважається запитом ресурсу перехресного походження (CORS) , що, іншими словами, означає, що запит автоматично видає запит OPTIONS, який перевіряє Заголовки CORS на стороні сервера / сервлета.

Це трапляється, навіть якщо ви встановите

crossOrigin: false;

або навіть якщо ви пропустите це.

Причина просто в тому localhost != localhost:57124. Спробуйте надіслати його лише localhostбез порту - це не вдасться, оскільки запитувана ціль не буде доступною, проте зауважте, що якщо доменні імена рівні, запит надсилається без запиту OPTIONS перед POST.

Я погоджуюсь з Кевіном Б, у звіті про помилку йдеться про все. Це здається, що ви намагаєтесь здійснювати міждоменні дзвінки ajax. Якщо ви не знайомі з тією ж політикою щодо джерела, можете почати тут: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript .

Якщо це не призначений для міждоменного виклику ajax, спробуйте зробити свій цільовий URL відносним і подивіться, чи проблема усунеться. Якщо ви справді відчайдушно заглядаєте в JSONP, але будьте обережні, хаос ховається. Ми дійсно не можемо зробити більше, щоб допомогти вам.

Якщо можливо, передайте парами через звичайний GET / POST з іншим іменем, і дозвольте вашому коду на стороні сервера обробляти це.

У мене була аналогічна проблема з моїм власним проксі-сервером, щоб обійти CORS, і я отримав ту ж помилку POST-> OPTION в Chrome. Це був Authorizationзаголовок у моєму випадку ( "x-li-format"і "X-UserName"ось у вашому випадку.) Я в кінцевому підсумку передав його у фіктивному форматі (наприклад, AuthorizatinJackу GET) і змінив код свого проксі, щоб перетворити його на заголовок під час виклику до місця призначення . Ось це в PHP:

if (isset($_GET['AuthorizationJack'])) {
    $request_headers[] = "Authorization: Basic ".$_GET['AuthorizationJack'];
}

У моєму випадку я закликаю API, розміщений AWS (API Gateway). Помилка сталася, коли я намагався викликати API з іншого, ніж власного домену API. Оскільки я є власником API, я включив CORS для тестового середовища, як описано в документації Amazon .

У виробництві ця помилка не відбудеться, оскільки запит і api будуть в одному домені.

Я сподіваюся, що це допомагає!

Як відповів @Dark Falcon, я просто розібрався з цим .

У моєму випадку я використовую сервер node.js і створюю сеанс, якщо його не існує. Оскільки метод OPTIONS не містить деталей сеансу, він створив новий сеанс для кожного запиту методу POST.

Тож у своєму розпорядженні програми створення-сеансу, якщо його немає, я просто додав чек, щоб перевірити, чи є метод OPTIONS, і якщо так, просто пропустіть сеанс, створивши частину:

    app.use(function(req, res, next) {
        if (req.method !== "OPTIONS") {
            if (req.session && req.session.id) {
                 // Session exists
                 next();
            }else{
                 // Create session
                 next();
          }
        } else {
           // If request method is OPTIONS, just skip this part and move to the next method.
           next(); 
        }
    }

"попередньо заздалегідь" запити спочатку надсилають HTTP-запит методом OPTIONS на ресурс іншого домену, щоб визначити, чи безпечний для надсилання фактичний запит. Запити між сайтом

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Подумайте про використання аксіосів

axios.get( url,
{ headers: {"Content-Type": "application/json"} } ).then( res => {

  if(res.data.error) {

  } else { 
    doAnything( res.data )
  }

}).catch(function (error) {
   doAnythingError(error)
});

У мене виникла ця проблема з використанням інструменту " fetch" і "axios" працювала на відмінно.

Я стикався з дуже подібною проблемою. Я витратив майже пів дня, щоб зрозуміти, чому все працює правильно у Firefox та виходить з ладу в Chrome. У моєму випадку це було через дублювані (або, можливо, неправильно введені) поля в заголовку мого запиту.

Використовуйте Fetch замість XHR, тоді запит не буде виділено навіть у тому випадку, коли він є доменним.

 $.ajax({
            url: '###',
            contentType: 'text/plain; charset=utf-8',
            async: false,
            xhrFields: {
                withCredentials: true,
                crossDomain: true,
                Authorization: "Bearer ...."
            },

            method: 'POST',

            data: JSON.stringify( request ),
            success: function (data) {
                console.log(data);
            }
        });

typeType: 'текст / звичайна; charset = utf-8 ', або просто contentType:' текст / звичайний ', працює для мене! З повагою !!