axios로 인증 헤더를 보내는 방법

axios.js를 통해 토큰과 함께 인증 헤더를 보내려면 어떻게해야합니까? 나는 성공하지 못한 채 몇 가지를 시도했다. 예를 들면 :

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

이 오류를 제공합니다.

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

전역 기본값을 설정하여 작동하도록 관리했지만 이것이 단일 요청에 대한 최선의 생각이 아니라고 생각합니다.

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

업데이트 :

Cole의 대답은 제가 문제를 찾는 데 도움이되었습니다. 내가 사용하고 장고 - 고르 헤더는 미들웨어 이미 기본적으로 인증 헤더를 처리하는.

하지만 오류 메시지를 이해할 수 있었고 다음과 같은 axios 요청 코드의 오류를 수정했습니다.

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

단순하지 않은 http 요청에서 브라우저는 먼저 "프리 플라이트"요청 (OPTIONS 메서드 요청)을 전송하여 문제의 사이트에서 전송할 안전한 정보를 결정합니다 (이에 대한 교차 출처 정책 사양 은 여기 참조 ). 호스트가 프리 플라이트 응답에서 설정할 수있는 관련 헤더 중 하나는 Access-Control-Allow-Headers입니다. 보내려는 헤더가 사양의 화이트리스트 헤더 목록이나 서버의 프리 플라이트 응답에 나열되지 않은 경우 브라우저는 요청 전송을 거부합니다.

귀하의 경우 Authorization헤더 를 보내려고 시도하고 있는데, 이는 헤더 를 보내는 데 보편적으로 안전한 것으로 간주되지 않습니다. 그런 다음 브라우저는 해당 헤더를 보내야하는지 여부를 서버에 요청하는 프리 플라이트 요청을 보냅니다. 서버가 빈 Access-Control-Allow-Headers헤더 ( "추가 헤더를 허용하지 않음"으로 간주 됨)를 전송하거나 포함하지 않는 헤더를 전송하고 있습니다.Authorization 허용 된 헤더 목록에 . 이 때문에 브라우저는 요청을 보내지 않고 대신 오류를 발생시켜 알림을 선택합니다.

이 요청을 보낼 수있는 Javascript 해결 방법은 브라우저가 사용자의 안전을 위해 시행하려는 교차 출처 요청 정책에 위배되므로 버그로 간주되어야합니다.

tl; dr-Authorization 헤더를 보내려면 서버가이를 허용하도록 구성하는 것이 좋습니다. 헤더OPTIONS가있는 해당 URL의요청에응답하도록 서버를 설정하십시오Access-Control-Allow-Headers: Authorization.

이 시도 :

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

이것은 나를 위해 일했습니다.

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

모든 요청에 ​​추가하는 대신 기본 구성으로 추가 할 수 있습니다.

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

거의 정확합니다.이 방법으로 코드를 조정하십시오.

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

백틱을 어디에 두 었는지 확인하고 Bearer 뒤에 ''를 추가했습니다. 서버 측에서 처리해야하는 경우 생략 할 수 있습니다.

axios.get 함수를 호출하는 대신 다음을 사용하십시오.

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

이것을 시도 할 수 있습니다.

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

인용구 : setHeader ()에 OPTIONS & Authorization을 추가해야합니다.

이 변경으로 내 문제가 해결되었습니다. 시도해보세요!

cors미들웨어를 설치하십시오 . 자체 코드로 해결하려고했지만 모든 시도가 비참하게 실패했습니다.

이로 인해 작동했습니다.

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

원본 링크