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

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

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.

Spróbuj tego :

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

To zadziałało dla mnie:

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

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

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

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

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

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

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!

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