[HTTP] OPTIONS, Preflight Request

타사에 ajax 요청했는데 자꾸 결과창이 두번 뜨는 오류 발생

함수가 2번 호출되는 것도 아니고 응답값이 2번 오는 것도 아님 (구조 상 1번 요청하면  결과 창이 뜨는 구조)

 

뭐가 문제일까 네트워크 탭 뒤져보다가 OPTIONS 요청 메소드가 한번 찍혀있고 그 다음에 원래 요청이 가네,,,?

 

참고 : 정상 호출될 때 캡처한게 아님

 

https://devolive.tistory.com/10

[HTTP] CORS

CORS 정리한 내용은 여기

 

 

CORS 요청에는 두가지 종류가 있음

1. Simple (GET & POST) Request

2. PUT과 같은 다른 HTTP요청, 추가 헤더가 있는 요청 등

 

Simple Request

simple request는 아래의 경우만 허용된다.

• GET, HEAD, POST 메소드만 가능 
• Request의 Content-Type은 다음만 가능
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
• custom header는 허용하지 않음 
  • 유저 에이전트가 자동으로 설정 한 헤더는 가능 
  • 그 외 가능한 header는 Fetch명세서 참고 

 

Preflight Request

조금 더 복잡한 요청에 대해 브라우저는 OPTION method를 통해 Preflight Request를 할 것.

(복잡하고 많은 양의 데이터를 서버로 보낸다고 가정해보자. Front에서 처리하고 파싱하고 담았는데 POST요청을 허용하지 않는다면 자원낭비가 되므로, 이를 방지하기 위해 서버에서 어떤 메서드와 어떤 header를 허용하는지 확인 과정이 필요하게 된다. -> 이 과정이 Preflight)

(CORS의 경우 보안 문제도 있음)

 

이를 위해 해당 서버로 OPTIONS를 미리 보내고 해당 응답을 확인한 후 HTTP Method가 지원된다면 실제 요청이 이루어지게 됨

 

OPTIONS를 preflight하여 서버에서 허용하는 옵션을 미리 확인하고, 허용되지 않은 요청의 경우 405(Method Not Allowed)에러를 발생시키고 실제 요청은 전송하지 않음

 

1. 브라우저에서 method를 OPTIONS로 요청 전송
2. OPTIONS를 받은 서버가 응답헤더에 허용하는 옵션(Access-Control-Allow-*)을 포함해 전송
3. 브라우저는 응답헤더의 옵션을 확인해 허용되지 않은 요청은 504에러 발생, 허용하는 경우 요청 전송

 

OPTIONS 요청 없애기

그래서 OPTIONS(preflight request)를 없앨 수 있을까?

1. CORS상황이 되지 않도록 하는 것 -> 웹서버와 동일한 서버의 리소스만 사용하면 됨
   하지만 API 서버가 분리되어 있는 경우가 많아 쉽지 않다. 
   특히 내 경우에는 타사 API를 사용하는 것이라 불가
2. CORS에서 preflight가 발생하지 않는 조건을 모두 만족시키는 것이다.(simple requets)
   하지만 이것도 일반적으로 인증을 위한 헤더를 포함하거나, 최근엔 Content-Type으로 application/json을 사용하는 경우가 많기 때문에 적용하기는 어려울 수 있다.
   

 

결론

열심히 검색하고 삽질하다가 결국 팀장님께 문의... 했더니 서버측에 문의하기로 하고 결론은 preflight request도 가고 응답값도 잘 오는데 창이 하나 뜨는 걸로 해결됨

삽질해서 공부했으니 그나마 다행이다.