Programing

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

lottogame 2020. 11. 8. 09:06
반응형

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 header = Authorization: `Bearer-${token}`;
return axios.get(URLConstants.USER_URL, { headers: { header } });

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


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

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

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

Original link

참고URL : https://stackoverflow.com/questions/44245588/how-to-send-authorization-header-with-axios

반응형