Cara mengirim header otorisasi dengan axios

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

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.

Coba ini :

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

Ini berhasil untuk saya:

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

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

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

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

Daripada memanggil fungsi axios.get, Gunakan:

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

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

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!

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