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());
참고URL : https://stackoverflow.com/questions/44245588/how-to-send-authorization-header-with-axios
'Programing' 카테고리의 다른 글
Vue.js : 서비스 정의 (0) | 2020.11.08 |
---|---|
* x, = lst 이해 (0) | 2020.11.08 |
나노 편집기에서 X 행으로 이동 (0) | 2020.11.07 |
내 고유 애플리케이션 내에서 Google Maps iPhone 애플리케이션을 시작하려면 어떻게해야합니까? (0) | 2020.11.07 |
DirectorySearcher에서 1000 개 이상의 레코드를 가져올 수 있습니까? (0) | 2020.11.07 |