在api调用的跨子域请求中没有发送Cookie。

Question

我有一个页面存储在 https:/page.domain.com.这里，我使用javascript（主要是Bootstrap）来获取数据，从 https:/api.domain.com。.当页面加载时，第一个调用是一个 "类似于 "验证的调用，它在头文件中返回一个cookie。

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

我可以在开发工具（Chrome）中看到cookie被正确存储。

但是，当我进行下一个api调用时（例如，填写一个下拉列表--bootstrap autocomplete），cookie不在请求中。当我在localhost中构建它时，它工作得很好（同一个 "域"，我猜），但是现在，html和apis运行在不同的域上，似乎cookie没有被共享。(另外，我'包括 "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函数，但这应该与此无关... ...

---

当从selectPicker中获取url时（例如：https:/api.domain.com）。https:/api.domain.comdata.json。 )，并将其直接放在浏览器中，我看到cookie被发送。这似乎表明问题可能在Bootstrap Select组件中，它没有正确发送头信息。

Answer 1

解决方法是在选择器请求中也包含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在评论中提出的想法。