axios Ngrok와 통신하면서 발생한 문제

서론

프로젝트에서 서버 비용 문제로 인해 빠른 테스트를 위해 개발 과정에서 Ngrok을 사용하기로 결정하였습니다. 그러나 Ngrok을 통한 통신 과정에서 에러가 발생하였습니다.

 

 

 

프론트엔드에서 서버로 API 요청을 보냈으나 요청한 값 대신 이미지와 같은 에러가 발생하였습니다. 백엔드에서는 204 상태 코드와 OPTIONS 요청이 발생하였고, 이를 통해 원인을 분석하였습니다.

 

원인 분석

204 상태 코드와 OPTIONS 요청이 발생하는 조건은 다음과 같습니다:

1. GET, HEAD, POST 요청이 아닌 경우
2. Custom HTTP Header가 존재하는 경우
3. 유저 에이전트가 자동으로 설정한 헤더
   • 예: Connection, User-Agent (en-US) 등
   • Fetch 명세에서 “forbidden header name”으로 정의된 헤더
4. 수동으로 설정할 수 있는 헤더는 다음과 같은 제한이 있습니다:
   • Fetch 명세에서 “CORS-safelisted request-header”로 정의한 헤더만 가능 (Accept, Accept-Language, Content-Language, Content-Type)
5. Content-Type이 application/x-www-form-urlencoded, multipart/form-data, text/plain이 아닌 경우

 

해결방법

'Access-Control-Allow-Credentials': true,
'ngrok-skip-browser-warning': true

 

headers의 ngrok를 스킵할수있는 코드를 추가해주면 문제없이 해결됩니다.