Axios ile yetkilendirme başlığı nasıl gönderilir

Axios.js aracılığıyla bir belirteç içeren bir kimlik doğrulama başlığını nasıl gönderebilirim? Başarı olmadan birkaç şey denedim, örneğin:

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

Bana şu hatayı veriyor:

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

Global varsayılanı ayarlayarak çalışmasını sağlamayı başardım, ancak bunun tek bir istek için en iyi fikir olmadığını tahmin ediyorum:

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

Güncelleme :

Cole'un cevabı sorunu bulmama yardımcı oldu. Yetkilendirme başlığını varsayılan olarak zaten işleyen django-cors-headers ara yazılımını kullanıyorum .

Ancak hata mesajını anlayabildim ve axios istek kodumdaki bir hatayı düzelttim, bu şuna benzer

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

Basit olmayan http isteklerinde tarayıcınız, söz konusu sitenin hangi bilgilerin gönderilmesi için güvenli olduğunu belirlemek için ilk olarak bir "ön kontrol" isteği (SEÇENEKLER yöntemi isteği) gönderecektir ( bununla ilgili çapraz kaynak politika spesifikasyonu için buraya bakın ). Ev sahibinin ön kontrol yanıtında ayarlayabileceği ilgili başlıklardan biri Access-Control-Allow-Headers. Göndermek istediğiniz başlıklardan herhangi biri, spesifikasyonun beyaz listedeki başlıklar listesinde veya sunucunun ön kontrol yanıtında listelenmemişse, tarayıcı isteğinizi göndermeyi reddeder.

Sizin durumunuzda, Authorizationevrensel olarak başlık göndermek için güvenli sayılmayan bir başlık göndermeye çalışıyorsunuz . Tarayıcı daha sonra sunucuya bu başlığı gönderip göndermeyeceğini sormak için bir ön kontrol isteği gönderir. Sunucu ya boş bir Access-Control-Allow-Headersbaşlık gönderiyor ("fazladan başlığa izin verme" anlamına gelir) veya Authorizationizin verilen üstbilgiler listesinde bulunmayan bir başlık gönderiyor . Bu nedenle, tarayıcı isteğinizi göndermeyecek ve bunun yerine bir hata atarak sizi bilgilendirmeyi seçecektir.

Bu isteği göndermenize izin veren bulduğunuz herhangi bir Javascript geçici çözümü, tarayıcınızın kendi güvenliğiniz için uygulamaya çalıştığı çapraz kaynak talebi politikasına aykırı olduğu için bir hata olarak değerlendirilmelidir.

tl; dr -AuthorizationBaşlıklargöndermek istiyorsanız, sunucunuz buna izin verecek şekilde yapılandırılmış olmalıdır. Sunucunuzu, o url'deki birOPTIONSisteğe birAccess-Control-Allow-Headers: Authorizationbaşlıkileyanıt verecek şekilde ayarlayın.

Bunu dene :

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

Bu benim için çalıştı:

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

Her isteğe eklemek yerine, bunu varsayılan bir yapılandırma olarak ekleyebilirsiniz.

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

Neredeyse haklısınız, sadece kodunuzu bu şekilde ayarlayın

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

Backticks nereye yerleştirdiğime dikkat edin, '' Bearer'dan sonra ekledim, sunucu tarafında işlem yapacağınızdan emin olursanız atlayabilirsiniz.

Axios.get işlevini çağırmak yerine şunu kullanın:

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

Bunu deneyebilirsin.

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

Blok alıntı: setHeader () öğesine SEÇENEKLER ve Yetki eklemeniz gerekir

bu değişiklik sorunumu çözdü, bir deneyin!

Ara corsyazılımı yükleyin . Kendi kodumuzla çözmeye çalışıyorduk, ancak tüm girişimler sefil bir şekilde başarısız oldu.

Bu, çalışmasını sağladı:

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

Orijinal bağlantı