CORS 에러...?
처음 프론트엔드 개발을 공부하고, 프로젝트를 하면서 API를 사용한 적이 있다. 이떄 CORS Error를 겪었다. 당시에는 구글링을 통해 해결책을 보고 공개되어 있는 CORS-ANYWHERE 프록시 서버로 우회하는 방법을 사용했다. 하지만 그 서버가 닫히고, 직접 cors-anywhere 를 배포하여 사용하는 과정을 겪으면서 근본적인 원인을 알고 싶었다.
SOP
SOP : Same Origin Policy, 다른 출처 리소스를 사용하는 것을 제한하는 보안 방식
출처 : URL의 Protocol, Host, Port이 3가지로 하나의 출처를 결정한다.
SOP를 쓰는 이유
- 악의적인 목적으로 해커가 제공하는 리소스에 접근하지 못하도록 막아서 보안을 유지한다.
SOP를 사용하면 보안에 도움이 된다. 하지만 현대의 웹에서 같은 출처의 리소스만을 사용하기에는 너무 아쉽다. 다른 출처의 리소스로의 접근이 필요하다.
CORS
SOP의 위와 같은 문제를 해결하기 위해 CORS가 등장한다.
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. - MDN
CORS 접근제어 시나리오
- Preflight 요청
Preflight: OPTIONS 메서드를 통해 실제 요청 전에 다른 출처의 리소스에 접근이 가능한지 확인하는 작업 => 요청 가능하다고 판단되면 실제 요청 전송- 왜 Preflight가 필요한가
- Preflight가 없이 바로 실제 요청을 하게 된다면, 요청이 서버로 도달하여 해당 작업을 끝내고 브라우저를 거쳐 클라이언트로 응답이 갈 때, CORS에러가 발생한다. 이렇게 되었을 경우에는 이미 클라이언트의 요청을 서버가 실행하고 난 후이다. 이렇게 되면 보안적으로도 문제가 생길 수 밖에 없기 때문에 Preflight를 사용한다.
- 단순 요청
- Preflight 과정 없이 바로 요청 보낸다.
- 다음과 같은 조건을 모두 만족해야함
- GET,POST,HEAD- CONTENT TYPE : application/x-www-form-urlencoded, multipart/form-data, text/plain
- HEADER : Accept, Accept-Language, Content-Language, Content-Type
- 인증정보 포함 요청
- 인증 관련 헤더를 포함할 때 사용하는 요청
그래서 CORS 에러를 어떻게 해결하나
cors-anywhere를 fork한다. 그리고 Koyeb에서 깃허브를 통한 배포를 하고, API요청 앞에 해당 서버의 URL을 붙여서 API요청을 시도하면 CORS에러가 해결되는 것을 볼 수가 있다.
cors-anywhere의 역할 : 응답 헤더에 요청 출처를 첨부하여 CORS에러가 발생하지 않게 해준다!
