Файлы cookie не отправляются по запросу между доменами при вызове API - PullRequest
Новая
       33

Файлы cookie не отправляются по запросу между доменами при вызове API

0 голосов
/ 16 апреля 2020

У меня есть страница, хранящаяся на https://page.domain.com. Здесь я использую javascript (в основном Bootstrap) для получения данных из https://api.domain.com. Первый вызов, когда страница загружена, является «своего рода» аутентификационным вызовом, который возвращает повар ie в заголовках: 

set-cookie: oauth=emd4YWgybTJobmJnZjVrbXl2ZjdlZThiOzkzczg1YWt2YzNyZW42cjk3M2U4dXlweA==; domain=.domain.com; path=/; expires=Fri, 16 Apr 2021 11:58:07 GMT;

Я вижу в инструментах разработчика (Chrome) что повар ie хранится правильно.

Но тогда, когда я делаю следующий вызов API (например, при заполнении выпадающего списка - bootstrap автозаполнение), повар ie не находится в запросе. Это работало нормально, когда я собирал его на локальном хосте (я думаю, тот же «домен»), но теперь, когда html и API работают на разных доменах, кажется, что файлы cookie не используются совместно. Я думал, что это может быть из-за двух разных доменов, но в соответствии с документацией, когда Cook ie установлен на основной домен, все субдомены должны иметь возможность совместно использовать его. (также я включаю флаг withCredentials)

Это код первоначального вызова (и настройка последующего): 

    $.ajax({url: 'https://api.domain.com/get-cookie',
        xhrFields: {
          withCredentials: true
        }
      })
    .done(function (response) {

  $('.selectpicker').selectpicker().ajaxSelectPicker({
    ajax: {
      // data source
      url: 'https://api.domain.com/data.json',
      // ajax type
      type: 'GET',
      // data type
      dataType: 'json',
      // Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
      // automatically replace it with the value of the search query.
      data: {
        q: '{{{q}}}'
      }
    },
    // function to preprocess JSON data
    preprocessData: function (data) {
      var i, l = data.length, array = [];
      if (l) {
        for (i = 0; i < l; i++) {
          array.push($.extend(true, data[i], {
            text : data[i].name,
            value: data[i].code,
            data : {
              subtext: data[i].code
            }
          }));
          localStorage.setItem(data[i].code, data[i].name);
        }
      }
      // You must always return a valid array when processing data. The
      // data argument passed is a clone and cannot be modified directly.
      return array;
    }     
  });
    }
);

Я использую AWS Функции API Gateway и Lambda, но это не должно относиться к делу ...

При получении URL-адреса из selectPicker (например, https://api.domain.com/data.json) и его непосредственном переносе в в браузере я вижу повара ie отправляется. Похоже, это указывает на то, что проблема может быть в компоненте Bootstrap Select, который неправильно отправляет заголовки. Я не уверен, смогу ли я заставить его работать так, как ожидалось, или мне придется искать какую-то другую альтернативу.

1 Ответ

0 голосов
/ 24 апреля 2020

Решением было также включить withCredentials в запрос селектора: 

$('.selectpicker').selectpicker().ajaxSelectPicker({
    ajax: {
      // data source
      url: 'https://api.domain.com/data.json',
      // ajax type
      type: 'GET',
      // data type
      dataType: 'json',
      // Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
      // automatically replace it with the value of the search query.
      data: {
        q: '{{{q}}}'
      },
      xhrFields: {
        withCredentials: true
      }
    },
    // function to preprocess JSON data
  preprocessData: function (data) {
        // ...
  }     
 });
 }
);

Спасибо @CBroe за идею в комментариях.

...