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