바닐라 자바스크립트에서의 CORS 이슈

배움/프론트엔드

jaytsol 2022. 12. 11. 22:57

바닐라 자바스크립트 환경에서 공공데이터포털로부터 API를 받아와서 활용하는 프로그램을 작성하고 있다.

CORS 규칙을 어겼다고 나와 이를 해결하고자 구글링하던 중..

바닐라 자바스크립트 관련 문서화가 너무나 잘 되어있는 곳이 있길래 공유한다.

CORS

ko.javascript.info

CORS뿐만 아니라 모든 내용이 굉장히 디테일하게 설명되어 있다.

대충 요약하여 설명하자면..

먼저 CORS, Cross-Origin Resource Sharing 은 인터넷 보안을 위한 규칙 중 하나이다.

원칙적으로 서로 다른 도메인, 서브도메인, 프로토콜, 포트끼리는 리소스를 공유할 수 없다는 규칙이다.

필요에 의한 예외를 두었을 때만 이를 허용함으로써 보안을 유지하도록 한다.

크로스 오리진 요청은 크게 두 가지로 나뉜다.

1. 안전한 요청

2. 안전하지 않은 요청

이 그것이다.

안전한 요청은 다음 두 가지 조건을 만족해야 한다.

1. 안전한 메서드 (GET, POST, HEAD)

2. 안전한 헤더

- Accept

- Accept-Language

- Content-Language

- 값이 application/x-www-form-urlencoded, multipart/form-data, text/plain인 Content-Type

위 조건을 만족하지 않으면 모두 안전하지 않은 요청이다.

가령 API_KEY가 숨겨져있지 않고 url에 명시되어 있다면 안전하지 않은 요청이다.

크로스 오리진 요청을 보낼 경우 브라우저는 항상 Origin이라는 헤더를 요청에 추가한다.

https://javascript.info/page에서 https://anywhere.com/request에 요청을 보낸다면 헤더는 다음과 같은 형태가 된다.

GET /request

Host: anywhere.com

...

요청을 받는 서버는 Origin을 검사하고 요청을 받아들이기로 동의한 상태라면 특별한 헤더인 Access-Control-Allow-Origin을 응답에 추가한다. 이 응답에는 '*' 또한 추가될 수 있는데, 이는 모든 도메인에 대해 요청을 허가한다는 뜻이다.

여기서 브라우저는 중재인의 역할을 한다.

즉, 브라우저는 서버로부터 받은 응답에 Access-Control-Allow-Origin이 있는지를 확인해서 서버가 크로스 오리진 요청을 허용하는지 아닌지를 확인한다.

이를 허용한 경우, preflight 요청에 대한 응답은 다음과 같은 형태를 띈다.

200 OK

Content-Type:text/html; charset=UTF-8

Access-Control-Allow-Origin: https://javascript.info