로컬에서 ec2에 접속을 시도할 시 CORS 에러

개발 서버를 ec2로 만들어 두었고 스웨거 밑 API를 구현 해 놓았다.

프론트 개발자들이 로컬에서 개발 서버의 api를 fetch 하였더니 이러한 에러가 나왔다.

 

```

Access to XMLHttpRequest at 'http://개발서버IP/v22/setting/bgm-list?' from origin 'http://localhost:9090' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

```

맞다 이젠 익숙한 CORS 에러다..

당연하게 CORS 설정에서 에러가 났을 것이다.

 

개발 서버라 모든 매핑주소 허용, 모든 Origin에 와일드카드를 해두어 모든 행위 허용을 설정하였다.

당연히 될 것이니 하였지만 안되었다...

 

서버에서 다른 에러로그가 있을까 했지만 CORS 에러는 브라우저에서 서버로 전송했을때 브라우저 단에서 동일한 Origin이 아니라면 에러를 보내기 떄문에 서버에서 에러로그가 남을 일이 없었다.

 

프론트개발자에게 Fetch 함수 부분을 보여달라 하였고, 위의 Cors 설정에서 허용하지 않은 헤더가 있었다.

우선은 .allowedHeaders("*")로 모든 헤더를 허용 시켰더니 CORS에러가 없었다.개발서버라 일단은 다 허용했다..

 

 

위의 헤더쪽 수정으로 해결하셨다면 뒤로가기 하셔도 좋다.

하지만 궁금한게 생겼다.

 

그런데 에러에 'preflight request', 'Access-Control-Allow-Origin'  이 둘이 조금 수상했다. 난 저런거 처음보는데?

preflight Request를 보냈는데 서버에서 보낸 응답에서 'Access-Control-Allow-Origin' 헤더란게 없어라는 에러 문구이다.

난 그냥 리퀘스트를 보냈는데 preflight 리퀘스트가 보내졌다니? 찾아보니

 

리퀘스트에는

예비 요청 (Preflight Request), 단순 요청 (Simple Request), 인증된 요청 (Credentialed Request)

세 가지가 있다.

우선 여기서는 예비 요청, 단순 요청에 집중한다..

 

단순 요청 (Simple Request)

단순 요청은 말그대로 예비 요청(Prefilght)을 생략하고 바로 서버에 직행으로 본 요청을 보낸 후, 서버가 이에 대한 응답의 헤더에 Access-Control-Allow-Origin 헤더를 보내주면 브라우저가 CORS정책 위반 여부를 검사하는 방식이다.

 

예비 요청 (Preflight Request)

사실 브라우저는 요청을 보낼때 한번에 바로 보내지않고, 먼저 예비 요청을 보내 서버와 잘 통신되는지 확인한 후 본 요청을 보낸다. 

즉, 예비 요청의 역할은 본 요청을 보내기 전에 브라우저 스스로 안전한 요청인지 미리 확인하는 것이다.

이때 브라우저가 예비요청을 보내는 것을 Preflight라고 부르며, 이 예비요청의 HTTP 메소드를 GET이나 POST가 아닌 OPTIONS라는 요청이 사용된다는 것이 특징이다.

 

단순 요청이 되는 기준은 

대표적으로 아래 3가지 경우를 만족 할때 만 가능하다.

1. ```
2. 요청의 메소드는 GET, HEAD, POST 중 하나여야 한다.
3. Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width 헤더일 경우 에만 적용된다.
4. Content-Type 헤더가 application/x-www-form-urlencoded, multipart/form-data, text/plain중 하나여야한다. 아닐 경우 예비 요청으로 동작된다.
5. ```

보통 JSON 컨텐트 타입이니 예비 요청으로 구분 되는 것이다.

 

지금은 개발서버에서 api 테스트할 때 Security를 구현 해놓으면 좋긴 하겠지만 테스트할때 너무 번거로워서 아직 안해두었다. 아마 JWT토큰 방식으로 인증/인가를 적용할텐데, 프론트에서 보내는 Request가 예비 요청으로 구분되 버리면

Preflight Request(OPTION 메서드)를 서버에 보낼텐데 서버에선 JWT 토큰을 Request의 헤더에서 요구를 할 것이다.

해당 요청에선 토큰이 없으니 403 에러가 분명 날 것이다.

 

다음에 Security 설정을 하게 되면 

 

이처럼 option 메서드의 접근을 허용시키고

허용 헤더에 인증 토큰을 허용 해주자. 

 

참고 : 

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

https://ahndding.tistory.com/17