Заголовок запиту контролю доступу, додається до заголовка в запиті AJAX за допомогою jQuery


404

Я хотів би додати спеціальний заголовок до запиту AJAX POST від jQuery.

Я спробував це:

$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
    //OR
    //beforeSend: function(xhr) { 
    //  xhr.setRequestHeader("My-First-Header", "first value"); 
    //  xhr.setRequestHeader("My-Second-Header", "second value"); 
    //}
}).done(function(data) { 
    alert(data);
});

Коли я надсилаю цей запит і дивлюся з FireBug, я бачу цей заголовок:

ВАРІАНТИ xxxx / yyyy HTTP / 1.1
Хост: 127.0.0.1:6666
Користувач-агент: Mozilla / 5.0 (Windows NT 6.1; WOW64; rv: 11.0) Gecko / 20100101 Firefox / 11.0
Прийняти: текст / html, додаток / xhtml + xml, application / xml; q = 0,9, / ; q = 0,8
Accept-Language: fr, fr-fr; q = 0,8, en-us; q = 0,5, en; q = 0,3
Accept-Encoding: gzip, deflate
З'єднання: утримувати -alive
Origin: null
Access-Control-Request-Method: POST
Access-Control-Request-заголовки: мій перший заголовок, мій другий заголовок
Прагма: без кешу
Кеш-контроль: без кешу

Чому мої користувацькі заголовки переходять до Access-Control-Request-Headers:

Access-Control-Request-Headers: мій перший заголовок, мій другий заголовок

Я очікував таких заголовків:

My-First-Header: перше значення
My-Second-Header: друге значення

Це можливо?



У заголовку запитання повинно бути зазначено, що "Для іншого домену"
бухгалтер

Відповіді:


138

Те, що ви бачили у Firefox, не було фактичним запитом; зауважте, що метод HTTP - це OPTIONS, а не POST. Насправді, запит "перед польотом", який браузер робить, щоб визначити, чи повинен бути дозволений міждоменний запит AJAX:

http://www.w3.org/TR/cors/

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


438

Ось приклад, як встановити заголовок запиту у виклику jQuery Ajax:

$.ajax({
  type: "POST",
  beforeSend: function(request) {
    request.setRequestHeader("Authority", authorizationToken);
  },
  url: "entities",
  data: "json=" + escape(JSON.stringify(createRequestObject)),
  processData: false,
  success: function(msg) {
    $("#results").append("The result =" + StringifyPretty(msg));
  }
});

10
THX, я знаю, надішліть запит Ajax з користувацьким заголовком. Моя проблема полягає в іншому домені. Усі мої власні заголовки розміщені в заголовках Access-Control-Request-Headers. це просто безпека у браузері: крос-домен.
пальцем

так, запити між доменами браузера можуть викликати певні труднощі. Ви завжди можете використовувати якийсь проксі-скрипт для надсилання запитів між доменами
milkovsky

Як додати заголовки за допомогою API KEY?
Si8

@ СІ8 ласка , перевірте цю посаду stackoverflow.com/questions/5517281 / ...
Мильковский

178

Цей код нижче працює для мене. Я завжди використовую лише окремі цитати, і це чудово працює. Я пропоную вам використовувати лише окремі цитати або лише подвійні лапки, але не змішані.

$.ajax({
    url: 'YourRestEndPoint',
    headers: {
        'Authorization':'Basic xxxxxxxxxxxxx',
        'X-CSRF-TOKEN':'xxxxxxxxxxxxxxxxxxxx',
        'Content-Type':'application/json'
    },
    method: 'POST',
    dataType: 'json',
    data: YourData,
    success: function(data){
      console.log('succes: '+data);
    }
  });

1
THX, я знаю, надішліть запит Ajax з користувацьким заголовком. Моя проблема полягає в іншому домені. Усі мої власні заголовки розміщені в заголовках Access-Control-Request-Headers. це просто безпека у браузері: крос-домен.
пальці

Дякую, я випадково встановив заголовки: "Авторизація: Basic XXXXXX", і iOS 9 / Safari 9 кинув SyntaxError DOM 12 на проект.
Марк

4
Ви маєте на увазі подвійні чи одиничні цитати? Я не думаю, що хтось використовував би подвійні дужки.
DBS

3
Подвійні або одиничні лапки (не "дужки") тут ні до чого.
Пер

його X-CSRF-TOKEN для Laravel 5.6 і вище
Абдул Рахман A Samad

12

Тому що ви надсилаєте власні заголовки, щоб ваш запит CORS був не є простим запитом , тому браузер спочатку надсилає попередній політ OPTIONS, щоб перевірити, чи дозволяє сервер ваш запит.

Введіть тут опис зображення

Якщо ви ввімкнете CORS на сервері, ваш код буде працювати. Ви також можете використовувати замість JavaScript ( тут) )

Ось приклад конфігурації, яка вмикає CORS на nginx (файл nginx.conf):

Ось приклад конфігурації, яка вмикає CORS на Apache (.htaccess файл)


3

І тому ви не можете створити бота за допомогою JavaScript, оскільки ваші параметри обмежені тим, що дозволяє браузер. Ви не можете просто замовити веб-переглядачу, який керується політикою CORS , якої дотримується більшість браузерів, щоб надсилати випадкові запити іншого походження та дозволяти просто отримати відповідь!

Крім того, якщо ви спробували відредагувати деякі заголовки запитів вручну, як- origin-headerот із інструментів розробників, які постачаються разом із браузерами, браузер відмовиться від вашої редагування та може надіслати OPTIONSзапит перед польотом .


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.