CORS 에러 관련 해결책
이전에 cors 라이브러리를 통해 해결하는 방법을 포스팅한적이 있는데 공부 중에 다른 방법도 있다는 얘기를 듣고 정리해서 포스팅해보려고 한다.
1. CORS 에러 발생 이유
위 사진의 출처는 MDN. 먼저 다시 한 번 CORS 에러의 발생 이유에 대해서 알아보려고 한다.
CORS 에러는 보안 상의 이유로 나타나는 에러로, 브라우저에서 자신의 출처와 동일한 리소스만 허가해주고, 다른 출처에서 리소스가 접근해오면 CORS에러가 나타난다.
이를 해결하기 위해서는 서버에서 특정 헤더인 Access-Control-Allow-Origin과 함께 응답을 해줘야 한다.
2. CORS 해결책 1 - 프록시 서버사용 (다른사람이 만든)
첫 번째 방법은 다른사람이 만든 프록시 서버를 사용하는 것이다. 프록시 서버를 사용하게되면 요청 자체가 우회해서 요청되고, 요청 중간에 해당 프록시 서버에서 요청을 가로채 HTTP 응답 헤더에 Access-Control-Allow-Origin를 설정해준다.
https://cors-anywhere.herokuapp.com 과 같은 사이트가 있다.
설정하는 방법은 클라이언트에서 요청할때 우리가 사용할 api url 앞에 프록시서버 주소를 그대로 붙여주면된다. 프록시서버 주소와 api url의 구별은 "/"로 한다.
3. CORS 해결책 2 - 서버에서 Access-Control-Allow-Origin 설정
두 번째 방법은 서버에서 Access-Control-Allow-Origin를 설정하는 것이다. api 응답값으로 설정해주면 되는데
res.header("Access-Control-Allow-Origin", "허가 할 도메인")이런식으로 보내면 된다. 만약 모든 출처에서 허용하고 싶으면 뒤쪽에 *를 입력해주면 된다.
4. CORS 해결책 3 - CORS 라이브러리 사용
https://velog.io/@joo0/CORS-Cross-Origin-Resource-Sharing
솔직히 이 방법이 제일 편하고 좋지만 왜 이런 문제가 발생하고 원리적인 해결책은 뭐가 있는지 알아두는것도 좋을 것같아서 정리했다.
