Buat Axios mengirim cookie dalam permintaannya secara otomatis

Saya mengirim permintaan dari klien ke server Express.js saya menggunakan Axios.

Saya menetapkan cookie pada klien dan saya ingin membaca cookie itu dari semua permintaan Axios tanpa menambahkannya secara manual ke permintaan secara manual.

Ini adalah contoh permintaan sisi klien saya:

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

Saya mencoba mengakses header atau cookie dengan menggunakan properti ini di server Express.js saya:

req.headers
req.cookies

Tak satu pun dari mereka berisi cookie. Saya menggunakan middleware parser cookie:

app.use(cookieParser())

Bagaimana cara membuat Axios mengirim cookie dalam permintaan secara otomatis?

Edit:

Saya mengatur cookie pada klien seperti ini:

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:'/'})
        }
      })
    }
...

Meskipun juga menggunakan Axios, ini tidak relevan dengan pertanyaannya. Saya hanya ingin menyematkan cookie ke semua permintaan saya setelah cookie disetel.

Saya memiliki masalah yang sama dan memperbaikinya dengan menggunakan withCredentialsproperti.

XMLHttpRequest dari domain lain tidak dapat menyetel nilai cookie untuk domain mereka sendiri kecuali withCredentials disetel ke true sebelum membuat permintaan.

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

TL; DR:

{ withCredentials: true } atau axios.defaults.withCredentials = true

Dari dokumentasi axios

withCredentials: false, // default

withCredentials menunjukkan apakah permintaan Kontrol Akses lintas situs harus dibuat menggunakan kredensial atau tidak

Jika Anda lulus { withCredentials: true }dengan permintaan Anda, itu akan berhasil.

Cara yang lebih baik akan menetapkan withCredentialssebagai truediaxios.defaults

axios.defaults.withCredentials = true

Saya kurang paham dengan Axios, tapi setahu saya di javascript dan ajax ada opsi

withCredentials: true

Ini secara otomatis akan mengirim cookie ke sisi klien. Sebagai contoh, skenario ini juga dibuat dengan passportjs, yang menetapkan cookie di server

Penting juga untuk menyetel tajuk yang diperlukan dalam tanggapan cepat. Ini adalah yang berhasil untuk saya:

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

Solusi lain adalah dengan menggunakan pustaka ini:

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

yang mengintegrasikan dukungan "Cookie Tangguh" ke Axios. Perhatikan bahwa pendekatan ini masih membutuhkan withCredentialsflag.

bagi orang-orang yang masih belum bisa menyelesaikannya, jawaban ini membantu saya. jawaban stackoverflow: 34558264

TLDR; seseorang perlu menyetel {withCredentials: true}permintaan GET dan juga permintaan POST (mendapatkan cookie) untuk axios dan juga fetch.

Bagaimana cara membuat Axios mengirim cookie dalam permintaan secara otomatis?

set axios.defaults.withCredentials = true;

atau untuk beberapa permintaan khusus yang dapat Anda gunakan axios.get(url,{withCredentials:true})

ini akan memberikan kesalahan CORS jika 'Access-Control-Allow-Origin' Anda disetel ke wildcard (*). Oleh karena itu, pastikan untuk menentukan url asal permintaan Anda

misalnya: jika front-end Anda yang membuat permintaan berjalan di localhost: 3000, maka setel header respons sebagai

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

juga diatur

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

Anda dapat menggunakan withCredentialsproperti untuk mengirimkan cookie dalam permintaan.

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

Dengan menyetelnya, { withCredentials: true }Anda mungkin mengalami masalah lintas sumber. Untuk mengatasinya, Anda perlu menggunakan

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

Di sini Anda dapat membaca tentang withCredentials

Anda mendapatkan dua pemikiran yang bercampur.

Anda memiliki "react-cookie" dan "axios"

react-cookie => digunakan untuk menangani cookie di sisi klien

axios => untuk mengirim permintaan ajax ke server

Dengan info itu, jika Anda ingin cookie dari sisi klien juga dikomunikasikan di sisi backend, Anda perlu menghubungkannya bersama.

Catatan dari "react-cookie" Readme:

Kue isomorfik!

Untuk dapat mengakses cookie pengguna saat melakukan rendering server, Anda dapat menggunakan plugToRequest atau setRawCookie.

tautan ke readme

Jika ini yang Anda butuhkan, bagus.

Jika tidak, mohon beri komentar agar saya bisa menjelaskan lebih lanjut.

Jadi saya memiliki masalah yang sama persis dan kehilangan sekitar 6 jam pencarian hidup saya, saya memiliki file

withCredentials: true

Tetapi browser masih tidak menyimpan cookie sampai karena beberapa alasan aneh saya punya ide untuk mengacak pengaturan konfigurasi:

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

Sepertinya Anda harus selalu mengirim Kunci 'withCredentials' terlebih dahulu.