Jak wysłać nagłówek autoryzacji z axios

98

Jak mogę wysłać nagłówek uwierzytelniania z tokenem za pośrednictwem axios.js? Próbowałem kilku rzeczy bez powodzenia, na przykład:

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

Daje mi ten błąd:

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

Udało mi się to uruchomić, ustawiając globalną wartość domyślną, ale domyślam się, że nie jest to najlepszy pomysł na pojedyncze żądanie:

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

Aktualizacja :

Odpowiedź Cole'a pomogła mi znaleźć problem. Używam oprogramowania pośredniczącego django-cors-headers, które już domyślnie obsługuje nagłówek autoryzacji.

Ale byłem w stanie zrozumieć komunikat o błędzie i naprawiłem błąd w moim kodzie żądania axios, który powinien wyglądać tak

return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });
foobar
źródło

Odpowiedzi:

88

W przypadku nieprostych żądań http Twoja przeglądarka wyśle ​​najpierw żądanie „inspekcji wstępnej” (żądanie metody OPTIONS) w celu określenia, jakie informacje dana witryna uważa za bezpieczne do wysłania (patrz tutaj, aby zapoznać się ze specyfikacją zasad dotyczących wielu źródeł). Jednym z odpowiednich nagłówków, które host może ustawić w odpowiedzi przed inspekcją, jest Access-Control-Allow-Headers. Jeśli któregokolwiek z nagłówków, które chcesz wysłać, nie zostało wymienione ani na liście nagłówków umieszczonych na białej liście specyfikacji, ani w odpowiedzi serwera wstępnego, przeglądarka odmówi wysłania żądania.

W twoim przypadku próbujesz wysłać Authorizationnagłówek, który nie jest uważany za jeden z powszechnie bezpiecznych do wysyłania nagłówków. Następnie przeglądarka wysyła żądanie inspekcji wstępnej, aby zapytać serwer, czy powinien wysłać ten nagłówek. Serwer wysyła pusty Access-Control-Allow-Headersnagłówek (co oznacza „nie zezwalaj na żadne dodatkowe nagłówki”) lub wysyła nagłówek, którego nie ma Authorizationna liście dozwolonych nagłówków. Z tego powodu przeglądarka nie wyśle ​​Twojego żądania i zamiast tego zdecyduje się powiadomić Cię, wyświetlając błąd.

Każde obejście Javascript, które mimo wszystko umożliwia wysłanie tego żądania, powinno zostać uznane za błąd, ponieważ jest sprzeczne z polityką żądań między źródłami, którą Twoja przeglądarka próbuje wymusić dla własnego bezpieczeństwa.

tl; dr - Jeśli chcesz wysyłaćAuthorizationnagłówki, lepiej skonfiguruj serwer, aby na to zezwalał. Skonfiguruj serwer tak, aby odpowiadał naOPTIONSżądanie pod tym adresem URL zAccess-Control-Allow-Headers: Authorizationnagłówkiem.

Cole Erickson
źródło
11
Dziękuję, Cole! Twoja odpowiedź pomogła mi znaleźć problem. Używam oprogramowania pośredniczącego django-cors-headers, które już domyślnie obsługuje nagłówek autoryzacji. Ale byłem w stanie zrozumieć komunikat o błędzie i naprawiłem błąd w moim kodzie żądania axios, który powinien wyglądać tak return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });
foobar
1
Nie ma za co! Cały czas mam taki problem z moimi interfejsami API. Cieszę się, że mogłem pomóc Ci zrozumieć proces, przez który musi przejść.
Cole Erickson
44

Spróbuj tego :

axios.get(
    url,
    {headers: {
        "name" : "value"
      }
    }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );
Matija Župančić
źródło
1
Więc nazwa nagłówka to „Access-Control-Allow-Headers”, a wartość jest taka, jaką chcesz.
Matija Župančić
Więc masz na myśli coś takiego: axios.get (url, {headers: {'Access-Control-Allow-Headers': 'Bearer <my token>'}})? To nie działa.
foobar
11
Uważam, że powinno to być {'Authorization': 'Bearer <my token>'}
John Harding
38

To zadziałało dla mnie:

let webApiUrl = 'example.com/getStuff';
let tokenStr = 'xxyyzz';
axios.get(webApiUrl, { headers: {"Authorization" : `Bearer ${tokenStr}`} });
sean717
źródło
2
W odpowiedzi jest mniej szczegółów w porównaniu z powyższym, ale jest to odpowiedź, której wszyscy szukają, szukając go w Google.
Black Mamba
33

Zamiast dodawać go do każdego żądania, możesz po prostu dodać go jako domyślną konfigurację.

axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}` 
Canaan Etai
źródło
jak umieścić tę konfigurację? w katalogu głównym (index.js, App.js)? Lub w osobnym pliku?
ibubi
8

Masz prawie rację, po prostu dostosuj swój kod w ten sposób

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

zwróć uwagę, gdzie umieszczam backticks, dodałem '' po Bearer, możesz pominąć, jeśli na pewno będziesz obsługiwać po stronie serwera

Jalasem
źródło
6
Zwykle (według specyfikacji) -między schematem autoryzacji a tokenem znajduje się spacja, a nie myślnik ( ). Nigdy nie widziałem, aby jakikolwiek serwer wymagał myślnika, jak pokazałeś, a większość, jeśli nie wszystkie, odsyłaby błąd, gdyby go podano.
Raman
6

Zamiast wywoływać funkcję axios.get użyj:

axios({ method: 'get', url: 'your URL', headers: { Authorization: `Bearer ${token}` } })
Deepak
źródło
1

Możesz tego spróbować.

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
    }
  );
Ashish
źródło
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');

Cytat blokowy: musisz dodać OPCJE i autoryzację do setHeader ()

ta zmiana rozwiązała mój problem, po prostu spróbuj!

MESDOUR
źródło
0

Zainstaluj corsoprogramowanie pośredniczące. Próbowaliśmy rozwiązać ten problem własnym kodem, ale wszystkie próby zakończyły się niepowodzeniem.

To sprawiło, że zadziałało:

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

Oryginalny link

dzwoniący dzwonek
źródło
1
to jest dla serwerów węzłów, a nie dla axios
Marc Garcia
Użytkownicy, którzy znajdą to pytanie, mogą uznać tę odpowiedź za przydatną. To pytanie może być użyte do pracy z serwerami węzłów w przypadkach użycia i być przypomnieniem, że cors mogą rozwiązać swój problem, lub przenieść sprawdzenie nagłówka zaplecza poniżej powyższego kodu. Pomogło mi zaoszczędzić tyle frustracji, Dziękuję dzwonku.
DORRITO