Cara mengirim header otorisasi dengan axios


99

Bagaimana cara mengirim header otentikasi dengan token melalui axios.js? Saya telah mencoba beberapa hal tanpa hasil, misalnya:

const header = `Authorization: Bearer ${token}`;
return axios.get(URLConstants.USER_URL, { headers: { header } });

Memberi saya kesalahan ini:

XMLHttpRequest cannot load http://localhost:8000/accounts/user/. Request header field header is not allowed by Access-Control-Allow-Headers in preflight response.

Saya telah berhasil membuatnya berfungsi dengan menyetel default global, tetapi saya rasa ini bukan ide terbaik untuk satu permintaan:

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

Pembaruan:

Jawaban Cole membantu saya menemukan masalahnya. Saya menggunakan middleware django-cors-headers yang sudah menangani header otorisasi secara default.

Tetapi saya dapat memahami pesan kesalahan dan memperbaiki kesalahan dalam kode permintaan axios saya, yang seharusnya terlihat seperti ini

return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });

Jawaban:


89

Pada permintaan http non-sederhana, browser Anda akan mengirim permintaan "preflight" (permintaan metode OPTIONS) terlebih dahulu untuk menentukan informasi apa yang dianggap aman untuk dikirim oleh situs tersebut (lihat di sini untuk spesifikasi kebijakan lintas-asal tentang hal ini). Salah satu header relevan yang dapat disetel oleh tuan rumah dalam respons preflight adalah Access-Control-Allow-Headers. Jika salah satu tajuk yang ingin Anda kirim tidak tercantum dalam daftar tajuk daftar putih spesifikasi atau tanggapan pra-penerbangan server, maka peramban akan menolak untuk mengirim permintaan Anda.

Dalam kasus Anda, Anda mencoba mengirim Authorizationheader, yang tidak dianggap sebagai salah satu header yang aman secara universal untuk dikirim. Browser kemudian mengirimkan permintaan preflight untuk menanyakan server apakah harus mengirim header itu. Server mengirimkan Access-Control-Allow-Headersheader kosong (yang dianggap sebagai "jangan izinkan header tambahan apa pun") atau mengirimkan header yang tidak termasuk Authorizationdalam daftar header yang diizinkan. Karena itu, browser tidak akan mengirimkan permintaan Anda dan malah memilih untuk memberi tahu Anda dengan melakukan kesalahan.

Solusi Javascript apa pun yang Anda temukan yang memungkinkan Anda mengirim permintaan ini bagaimanapun juga harus dianggap sebagai bug karena bertentangan dengan kebijakan permintaan lintas sumber yang coba diterapkan browser Anda demi keamanan Anda sendiri.

tl; dr - Jika Anda ingin mengirimAuthorizationheader, server Anda sebaiknya dikonfigurasi untuk mengizinkannya. Siapkan server Anda agar menanggapiOPTIONSpermintaan di url itu denganAccess-Control-Allow-Headers: Authorizationheader.


11
Terima kasih, Cole! Jawaban Anda membantu saya menemukan masalahnya. Saya menggunakan middleware django-cors-headers yang sudah menangani header otorisasi secara default. Tetapi saya dapat memahami pesan kesalahan dan memperbaiki kesalahan dalam kode permintaan axios saya, yang seharusnya terlihat seperti ini return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });
foobar

1
Sama-sama! Saya mengalami masalah seperti ini dengan API saya sepanjang waktu. Senang sekali saya dapat membantu Anda memahami proses yang harus dilalui.
Cole Erickson

44

Coba ini :

axios.get(
    url,
    {headers: {
        "name" : "value"
      }
    }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );

1
Jadi nama header akan menjadi 'Access-Control-Allow-Headers' dan nilainya adalah yang Anda inginkan.
Matija Župančić

Jadi, maksud Anda saya memiliki sesuatu seperti: axios.get (url, {headers: {'Access-Control-Allow-Headers': 'Bearer <my token>'}})? Itu tidak berhasil.
foobar

11
Saya yakin seharusnya {'Authorization': 'Bearer <my token>'}
John Harding

38

Ini berhasil untuk saya:

let webApiUrl = 'example.com/getStuff';
let tokenStr = 'xxyyzz';
axios.get(webApiUrl, { headers: {"Authorization" : `Bearer ${tokenStr}`} });

2
Ada lebih sedikit detail dalam jawaban dibandingkan dengan di atas tetapi ini adalah jawaban yang dicari semua orang ketika mereka mencari google.
Black Mamba

33

Daripada menambahkannya ke setiap permintaan, Anda bisa menambahkannya sebagai konfigurasi default seperti itu.

axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}` 

bagaimana Anda menempatkan konfigurasi ini? di root (index.js, App.js)? Atau dalam file terpisah?
ibubi

8

Anda hampir benar, sesuaikan saja kode Anda dengan cara ini

const headers = { Authorization: `Bearer ${token}` };
return axios.get(URLConstants.USER_URL, { headers });

perhatikan di mana saya menempatkan backticks, saya menambahkan '' setelah Bearer, Anda dapat menghilangkan jika Anda pasti akan menangani di sisi server


6
Biasanya (menurut spesifikasi) ada spasi, bukan tanda hubung ( -), antara skema autentikasi dan token. Saya belum pernah melihat jenis server apa pun yang memerlukan tanda hubung seperti yang Anda tunjukkan, dan sebagian besar, jika tidak semua, akan mengembalikan kesalahan jika disediakan.
Raman

6

Daripada memanggil fungsi axios.get, Gunakan:

axios({ method: 'get', url: 'your URL', headers: { Authorization: `Bearer ${token}` } })

1

Anda bisa mencobanya.

axios.get(
    url,
    {headers: {
            "Access-Control-Allow-Origin" : "*",
            "Content-type": "Application/json",
            "Authorization": `Bearer ${your-token}`
            }   
        }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );

0
res.setHeader('Access-Control-Allow-Headers',
            'Access-Control-Allow-Headers, Origin,OPTIONS,Accept,Authorization, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers');

Blockquote: Anda harus menambahkan OPTIONS & Otorisasi ke setHeader ()

perubahan ini telah memperbaiki masalah saya, coba saja!


0

Instal corsmiddleware. Kami mencoba menyelesaikannya dengan kode kami sendiri, tetapi semua upaya gagal total.

Ini membuatnya berhasil:

cors = require('cors')
app.use(cors());

Tautan asli


1
ini untuk server node, bukan untuk aksios
Marc Garcia

Pengguna menemukan pertanyaan ini dapat menemukan jawaban ini berguna. Pertanyaan ini dapat digunakan untuk bekerja dengan server node dalam kasus penggunaan, dan menjadi pengingat bahwa cors dapat menyelesaikan masalah mereka, atau untuk memindahkan cek header backend di bawah kode di atas. Membantu menyelamatkan saya begitu banyak frustrasi, Terima kasih dering-bel.
DORRITO
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.