未在 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 调用（例如，填充下拉列表 - 引导自动完成）时，cookie 不在请求中。当我在 localhost（我猜是相同的“域”）中构建它时，这工作正常，但是现在，在不同的域上运行 html 和 api，似乎没有共享 cookie。我认为这可能是因为两个不同的域，但是根据文档，当将 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/data.json）并将其直接放在浏览器中时，我看到正在发送 cookie。这似乎表明问题可能出在未正确发送标头的 Bootstrap Select 组件中。我不确定我是否可以使其按预期工作，或者我必须找到其他替代方案。

Answer 1

解决方案是在选择器请求中也包含 withCredentials：$('.selectpicker').selectpicker().ajaxSelectPicker({&nbsp; &nbsp; ajax: {&nbsp; &nbsp; &nbsp; // data source&nbsp; &nbsp; &nbsp; url: 'https://api.domain.com/data.json',&nbsp; &nbsp; &nbsp; // ajax type&nbsp; &nbsp; &nbsp; type: 'GET',&nbsp; &nbsp; &nbsp; // data type&nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; // Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will&nbsp; &nbsp; &nbsp; // automatically replace it with the value of the search query.&nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; q: '{{{q}}}'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; xhrFields: {&nbsp; &nbsp; &nbsp; &nbsp; withCredentials: true&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; // function to preprocess JSON data&nbsp; preprocessData: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; // ...&nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;});&nbsp;});