본문 바로가기

Trouble Shooting

[CORS ] 응답데이터를 로드할 수 없음 : 프리플라이트 요청에 사용 가능한 콘텐츠 없음

개발을 하던중 요청 url 이 잘 적용되었는지 확인하려고 개발자도구의 네트워크상에서 미리보리를 보려했는데 위와 같은 문구와 함께

볼수가 없었다.

 

하지만 코드상에서 console.log로 찍어서 하나하나 확인할 수 있어 대수롭지 않게 하나씩 디버깅을 해서 개발을 해도 문제가 없었다.

즉, 서로간의 통신은 잘되지만 특정 프리플라이트 요청 에서는 안되는 것이다.

 

 

프리 플라이트 요청이란 ?


- 본 요청을 보내기 전에 사전에 물어본다.

  • 클라이언트는 서버에 사전 요청을 보내 확인하고, 서버는 해당 사전 요청에 응답을 한다.
  • 서버가 사전 요청을 허용했다면 다시 본 요청을 보낸다.
  • 총 2번의 통신을 주고 받는다.


- 프리플라이트 요청 포맷

  • Origin: 요청 출처
  • Access-Control-Request-Method: 실제 요청 메소드
  • Access-Control-Request-Headers: 실제 요청의 추가 헤더


- 프리플라이트 응답 포맷

  • Access-Control-Allow-Origin: 서버 측 허가 출처
  • Access-Control-Allow-Method: 서버 측 허가 헤드
  • Access-Control-Allow-Headers: 서버 측 허가 헤더
  • Access-Control-Max-Age: 프리플라이트 응답 캐시 시간


- 프리플라이트 응답 메시지가 가져야할 특징

  • 응답 코드는 200대여야 한다.
  • 응답 body는 비어있어야 한다.

 

 

 

우선 개발하는데 큰 지장은 없어 따로 설정은 하지 않지만 차후 이러한 원인 때문에 지장이 있을 수 있으니 개념 정리 까지만 !