ดึง API ด้วยคุกกี้

ฉันกำลังลอง API การดึงข้อมูลใหม่ แต่มีปัญหากับคุกกี้ หลังจากเข้าสู่ระบบสำเร็จจะมีส่วนหัวของคุกกี้ในคำขอในอนาคต แต่การดึงข้อมูลดูเหมือนจะไม่สนใจส่วนหัวนั้นและคำขอทั้งหมดของฉันที่ทำด้วยการดึงข้อมูลนั้นไม่ได้รับอนุญาต

เป็นเพราะการดึงข้อมูลยังไม่พร้อมหรือการดึงข้อมูลไม่ทำงานกับคุกกี้

ฉันสร้างแอปของฉันด้วย Webpack ฉันยังใช้ Fetch ใน React Native ซึ่งไม่มีปัญหาเดียวกัน

การดึงข้อมูลไม่ได้ใช้คุกกี้เป็นค่าเริ่มต้น หากต้องการเปิดใช้งานคุกกี้ให้ทำดังนี้

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

นอกจากคำตอบของ @ Khanetor สำหรับผู้ที่ทำงานกับคำขอข้ามสายงาน: credentials: 'include'

ตัวอย่างคำขอเรียก JSON:

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

เพิ่งได้รับการแก้ไข เพียงสองฉ วันแห่งความโหดร้าย

สำหรับฉันความลับมีดังต่อไปนี้:

1. ฉันโทร POST / api / auth และดูว่าได้รับคุกกี้เรียบร้อยแล้ว

2. จากนั้นโทรหา GET / api / users / ด้วยcredentials: 'include'และได้รับ 401 unauth เนื่องจากไม่มีการส่งคุกกี้ใด ๆ มาพร้อมกับคำขอ

KEY คือการตั้งค่าcredentials: 'include'สำหรับการ/api/authโทรครั้งแรกเกินไป

หากคุณกำลังอ่านสิ่งนี้ในปี 2019 credentials: "same-origin"เป็นค่าเริ่มต้น

fetch(url).then

เพียงเพิ่มคำตอบที่ถูกต้องที่นี่สำหรับ.net webapi2ผู้ใช้

หากคุณกำลังใช้งานcorsเนื่องจากเว็บไซต์ลูกค้าของคุณให้บริการจากที่อยู่อื่นเป็นของwebapiคุณคุณจะต้องรวมSupportsCredentials=trueอยู่ในการกำหนดค่าฝั่งเซิร์ฟเวอร์

        // 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);

สิ่งนี้ใช้ได้กับฉัน:

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;
}

จากนั้นสร้างสายของคุณ:

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)));
    };
  }