TIL 19. CORS

오늘은 크롤링을 하던 중에 만났던 오류에 대해 포스팅 하려고 한다.

내가 만난 오류다.
영어를 못하지만 대충 번역하자면 CORS 때문에 리소스를 요청할 수 없다는 내용이다.
jsonp라는 데이터 타입을 사용해서 해결했지만, CORS에 대해 궁금해서 찾아보았다.

CORS는 Cross-Origin Resource Sharing의 줄임말로, 직역하면 교차 출처 리소스 공유다.

교차(Cross) 출처는(Origin) 다른(Resource) 출처(Sharing)를 의미하는데,
출처란 여러개의 구성요소로 이루어진 url 자체를 뜻한다. 물론 우리 눈에 안 보이는 :80같은 포트번호도 포함이다.
예를 들면, https://www.google.com/search?asd#aaa:80가 출처다.

리소스를 가진 출처와 같은 출처를 가진 곳에서만 리소스를 공유할 수 있다는 규칙이 SOP라는 것인데,
SOP에 예외 규정을 두는게 CORS 정책을 지킨 리소스 요청이다.

다른 출처로 리소스를 요청하면 SOP를 위반하게 되고, CORS 정책을 지킨다면 리소소를 받아갈 수 있겠지만, CORS까지 지키지 않는다면 아예 받아갈 수 없다.

이러한 정책은 개발을 하는 우리에게 귀찮음을 안겨주지만, 꼭 필요해보이긴 한다.
가끔 개발자 도구를 보면, 이 정보들로 뭘 빼내거나 바꾸거나 할 수 있지 않을까 하는 생각이 들었으니 말이다.

두 개의 출처가 같다고 판단하는 기준은 Scheme과 Host, Port만 같으면 된다.
https://www.google.com/search?asd#aaa:80에서
https:// 부분이 Scheme, www.google.com 부분이 Host, :80이 Port다.

원래는 CORS에 막혀, 데이터를 가져올 수 없었지만,
dataType: 'jsonp' 이 부분처럼 데이터 타입을 json이 아닌 jsonp으로 바꾸면 가져올 수 있다.
일종의 우회다. 데이터가 json형태로 되어 있어야만 가져올 수 있고,
get방식에서만 사용할 수 있다고 하지만 다른 분의 게시글을 보니 post 방식으로도 가져오셨다.

CORS를 해결하려고 구글링을 해보니 정말 많은 해결 방법이 있었다.
서버 쪽에서 처리할 수도 있고, axios, node.js, 프록시 서버 등으로 해결할 수도 있었다.
하지만 난 firebase를 사용하고, 제공되는 데이터가 json타입이라 jsonp로 비교적 쉽게 가져올 수 있었다.