ทำให้ Axios ส่งคุกกี้ในคำขอโดยอัตโนมัติ

ฉันกำลังส่งคำขอจากไคลเอนต์ไปยังเซิร์ฟเวอร์ Express.js โดยใช้ Axios

ฉันตั้งค่าคุกกี้บนไคลเอนต์และฉันต้องการอ่านคุกกี้นั้นจากคำขอของ Axios ทั้งหมดโดยไม่ต้องเพิ่มคุกกี้ด้วยตนเองเพื่อขอด้วยมือ

นี่คือตัวอย่างคำขอไคลเอ็นต์ของฉัน:

axios.get(`some api url`).then(response => ...

ฉันพยายามเข้าถึงส่วนหัวหรือคุกกี้โดยใช้คุณสมบัติเหล่านี้ในเซิร์ฟเวอร์ Express.js ของฉัน:

req.headers
req.cookies

ไม่มีคุกกี้ใด ๆ ฉันใช้มิดเดิลแวร์ตัวแยกวิเคราะห์คุกกี้:

app.use(cookieParser())

ฉันจะทำให้ Axios ส่งคุกกี้ในคำขอโดยอัตโนมัติได้อย่างไร

แก้ไข:

ฉันตั้งค่าคุกกี้บนไคลเอนต์ดังนี้:

import cookieClient from 'react-cookie'

...
let cookie = cookieClient.load('cookie-name')
if(cookie === undefined){
      axios.get('path/to/my/cookie/api').then(response => {
        if(response.status == 200){
          cookieClient.save('cookie-name', response.data, {path:'/'})
        }
      })
    }
...

แม้ว่าจะใช้ Axios แต่ก็ไม่เกี่ยวข้องกับคำถาม ฉันแค่ต้องการฝังคุกกี้ลงในคำขอทั้งหมดของฉันเมื่อตั้งค่าคุกกี้แล้ว

ฉันมีปัญหาเดียวกันและได้รับการแก้ไขโดยใช้withCredentialsคุณสมบัติ

XMLHttpRequest จากโดเมนอื่นไม่สามารถตั้งค่าคุกกี้สำหรับโดเมนของตนเองได้เว้นแต่ว่า withCredentials จะถูกตั้งค่าเป็น true ก่อนที่จะทำการร้องขอ

axios.get('some api url', {withCredentials: true});

TL; DR:

{ withCredentials: true } หรือ axios.defaults.withCredentials = true

จากเอกสาร axios

withCredentials: false, // default

withCredentials ระบุว่าควรส่งคำขอการควบคุมการเข้าถึงข้ามไซต์โดยใช้ข้อมูลประจำตัวหรือไม่

หากคุณผ่าน{ withCredentials: true }คำขอของคุณควรใช้งานได้

วิธีที่ดีกว่าจะได้รับการตั้งค่าwithCredentialsเป็นtrueในaxios.defaults

axios.defaults.withCredentials = true

ฉันไม่คุ้นเคยกับ Axios แต่เท่าที่ฉันรู้ในจาวาสคริปต์และ ajax มีตัวเลือก

withCredentials: true

การดำเนินการนี้จะส่งคุกกี้ไปยังฝั่งไคลเอ็นต์โดยอัตโนมัติ ตัวอย่างเช่นสถานการณ์นี้สร้างขึ้นด้วย passportjs ซึ่งตั้งค่าคุกกี้บนเซิร์ฟเวอร์

สิ่งสำคัญคือต้องตั้งค่าส่วนหัวที่จำเป็นในการตอบกลับด่วน นี่คือสิ่งที่เหมาะกับฉัน:

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', yourExactHostname);
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

อีกวิธีหนึ่งคือการใช้ไลบรารีนี้:

https://github.com/3846masa/axios-cookiejar-support

ซึ่งรวมการสนับสนุน "Tough Cookie" เข้ากับ Axios โปรดทราบว่าแนวทางนี้ยังคงต้องใช้withCredentialsแฟล็ก

สำหรับคนที่ยังแก้ไม่ได้คำตอบนี้ช่วยฉันได้ คำตอบ stackoverflow: 34558264

TLDR; จำเป็นต้องตั้งค่า{withCredentials: true}ในคำขอ GET ทั้งสองเช่นกันคำขอ POST (รับคุกกี้) สำหรับทั้งสองแกนและการดึงข้อมูล

ฉันจะทำให้ Axios ส่งคุกกี้ในคำขอโดยอัตโนมัติได้อย่างไร

ชุด axios.defaults.withCredentials = true;

หรือสำหรับคำขอเฉพาะบางอย่างที่คุณสามารถใช้ได้ axios.get(url,{withCredentials:true})

สิ่งนี้จะทำให้เกิดข้อผิดพลาด CORS หาก 'Access-Control-Allow-Origin' ของคุณถูกตั้งค่าเป็นสัญลักษณ์แทน (*) ดังนั้นโปรดระบุ url ต้นทางของคำขอของคุณ

เช่น: หากส่วนหน้าของคุณซึ่งทำให้คำขอทำงานบน localhost: 3000 ให้ตั้งค่าส่วนหัวการตอบกลับเป็น

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

ยังตั้ง

res.setHeader('Access-Control-Allow-Credentials',true);

ดังนั้นฉันจึงมีปัญหาเดียวกันนี้และเสียชีวิตไปประมาณ 6 ชั่วโมงในการค้นหาฉันมี

withCredentials: true

แต่เบราว์เซอร์ยังคงไม่บันทึกคุกกี้จนกระทั่งด้วยเหตุผลแปลก ๆ ฉันมีความคิดที่จะสับเปลี่ยนการตั้งค่า:

Axios.post(GlobalVariables.API_URL + 'api/login', {
        email,
        password,
        honeyPot
    }, {
        withCredentials: true,
        headers: {'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json'
    }});

ดูเหมือนว่าคุณควรส่งคีย์ 'withCredentials' ก่อนเสมอ

คุณสามารถใช้withCredentialsคุณสมบัติเพื่อส่งผ่านคุกกี้ในคำขอ

axios.get(`api_url`, { withCredentials: true })

โดยการตั้งค่า{ withCredentials: true }คุณอาจพบปัญหาข้ามแหล่งกำเนิด เพื่อแก้ปัญหาที่คุณต้องใช้

expressApp.use(cors({ credentials: true, origin: "http://localhost:8080" }));

คุณสามารถอ่านเกี่ยวกับwithCredentials ได้ที่นี่

คุณกำลังคิดทั้งสองอย่างผสมกัน

คุณมี "react-cookie" และ "axios"

react-cookie => ใช้สำหรับจัดการคุกกี้ทางฝั่งไคลเอ็นต์

axios => ใช้สำหรับส่งคำขอ ajax ไปยังเซิร์ฟเวอร์

ด้วยข้อมูลดังกล่าวหากคุณต้องการให้คุกกี้จากฝั่งไคลเอ็นต์ถูกสื่อสารในด้านแบ็กเอนด์ด้วยคุณจะต้องเชื่อมต่อคุกกี้เข้าด้วยกัน

หมายเหตุจาก Readme "react-cookie":

คุกกี้ Isomorphic!

เพื่อให้สามารถเข้าถึงคุกกี้ของผู้ใช้ในขณะที่ทำการแสดงผลเซิร์ฟเวอร์คุณสามารถใช้ plugToRequest หรือ setRawCookie

ลิงค์ไปยัง readme

หากนี่คือสิ่งที่คุณต้องการเยี่ยมมาก

ถ้าไม่โปรดแสดงความคิดเห็นเพื่อให้ฉันได้อธิบายเพิ่มเติม