1
Axios 라이브러리를 사용하여 내 React 응용 프로그램에서 API 호출을합니다. API를 호출하고 React를 사용하여 테이블을 채 웁니다.프리 플라이트에 대한 응답에 Axios를 사용하는 잘못된 HTTP 상태 코드 400이 있습니다.
axios({
method: 'get',
url: DataURL,
headers: {
'Content-Type' : 'application/json',
'Id': user.Id,
'Name' : user.Name,
'api-token' : user.access_token,
'clientId' : 'web',
},
responseType: 'json',
})
.then((response) => {
this.setState({ tableData: response.data });
});
그러나 나는이 오류가 발생합니다 : 다음과 같이
내 Axios의 호출은
XMLHttpRequest cannot load MY API URL Response for preflight has invalid HTTP status code 400
그러나 후에, 나는 어떤 헤더를 추가하지 않은 내 dev 환경에서 작업하는 것과 같은 새로운 env로 이동하여 헤더를 추가해야합니다. 위의 오류가 발생합니다. 내 질문은, 이것은 클라이언트 측 문제 (잘못된 헤더 형식 등) 또는 API 호출의 서버 측 처리와 관련이 있습니까?
* "프리 플라이트에 대한 응답이 유효하지 않은 HTTP 상태 코드 400"* - 프리 플라이트가 OPTIONS 요청이며 일을 이해하는 한 서버가 OPTIONS 요청에 400으로 응답해야하는 정당한 이유가 없습니다. 서버 구성이 잘못되었거나 구성이 부족합니다. 어쨌든, 프리 플라이트 OPTIONS 요청은 브라우저가 자동으로하는 일이기 때문에 프론트 엔드 코드에서 OPTIONS가 공식화되는 방법을 제어 할 수 없습니다. 따라서 문제를 해결할 수있는 방법은 없습니다. 대신 서버가 올바르게 응답하도록 수정해야합니다. – sideshowbarker
그리고 분명히하기 위해 브라우저가 OPTIONS 요청을 보내는 이유는 'api-token', 'clientId', 'Name', ' Id '및'Content-Type : 'application/json'요청 헤더가 있습니다. 요청에 해당 헤더 중 하나만 추가하면 브라우저가 프리 플라이트를 수행합니다. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests를 참조하십시오. 따라서 브라우저에서 실행중인 프론트 엔드 JavaScript 코드에서이 요청을 작동 시키려면 해당 프리 플라이트 OPTIONS에 올바르게 응답하도록 코드가 수정되어야합니다. – sideshowbarker