Tìm nạp API bằng Cookie

Tôi đang thử API Fetch mới nhưng gặp sự cố với Cookies. Cụ thể, sau khi đăng nhập thành công, có một tiêu đề Cookie trong các yêu cầu trong tương lai, nhưng Fetch dường như bỏ qua các tiêu đề đó và tất cả các yêu cầu của tôi được thực hiện với Fetch đều không được phép.

Có phải vì Fetch vẫn chưa sẵn sàng hoặc Fetch không hoạt động với Cookies?

Tôi xây dựng ứng dụng của mình với Webpack. Tôi cũng sử dụng Fetch trong React Native, không có vấn đề tương tự.

Tìm nạp không sử dụng cookie theo mặc định. Để bật cookie, hãy làm điều này:

fetch(url, {
  credentials: "same-origin"
}).then(...).catch(...);

Ngoài câu trả lời của @ Khanetor, cho những người đang làm việc với các yêu cầu nguồn gốc chéo: credentials: 'include'

Yêu cầu tìm nạp JSON mẫu:

fetch(url, {
  method: 'GET',
  credentials: 'include'
})
  .then((response) => response.json())
  .then((json) => {
    console.log('Gotcha');
  }).catch((err) => {
    console.log(err);
});

https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials

Vừa giải quyết. Chỉ cần hai f. ngày tàn bạo

Đối với tôi, bí mật là như sau:

1. Tôi đã gọi POST / api / auth và thấy rằng cookie đã được nhận thành công.

2. Sau đó, gọi GET / api / users / with credentials: 'include'và nhận được 401 unauth, vì không có cookie nào được gửi cùng với yêu cầu.

Phím này cũng được đặt credentials: 'include'cho /api/authcuộc gọi đầu tiên .

Nếu bạn đang đọc điều này vào năm 2019, credentials: "same-origin"là giá trị mặc định.

fetch(url).then

Chỉ cần thêm vào các câu trả lời chính xác ở đây cho .net webapi2người dùng.

Nếu bạn đang sử dụng corsvì trang web khách của bạn được phục vụ từ một địa chỉ khác như địa chỉ của bạn webapithì bạn cũng cần đưa SupportsCredentials=truevào cấu hình phía máy chủ.

        // Access-Control-Allow-Origin
        // https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api
        var cors = new EnableCorsAttribute(Settings.CORSSites,"*", "*");
        cors.SupportsCredentials = true;
        config.EnableCors(cors);

Điều này làm việc cho tôi:

import Cookies from 'universal-cookie';
const cookies = new Cookies();

function headers(set_cookie=false) {
  let headers = {
    'Accept':       'application/json',
    'Content-Type': 'application/json',
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
};
if (set_cookie) {
    headers['Authorization'] = "Bearer " + cookies.get('remember_user_token');
}
return headers;
}

Sau đó, xây dựng cuộc gọi của bạn:

export function fetchTests(user_id) {
  return function (dispatch) {
   let data = {
    method:      'POST',
    credentials: 'same-origin',
    mode:        'same-origin',
    body:        JSON.stringify({
                     user_id: user_id
                }),
    headers:     headers(true)
   };
   return fetch('/api/v1/tests/listing/', data)
      .then(response => response.json())
      .then(json => dispatch(receiveTests(json)));
    };
  }