CORS

Bedakim·2020년 3월 22일
3
post-thumbnail

데이터를 받아오기 위해 api에 요청을 보냈더니 CORS를 뱉어냈다.
평소엔 문제해결을 위한 방법만 찾았겠지만 포스팅을 위한 먹잇감🍖으로 삼기로했다.

CORS?

많이 접해 보기도 했고 생각보다 간단한(뒷쪽에 요청)방법들로 해결했던 CORS 란 무엇인가?

Cross-Origin Resource Sharing 의 줄임 말로

추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이
다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
-MDN-

...라고 하는데 간단히 말하자면
도메인 이나 포트가 다른 서버에 자원을 요청 하는 것인데

브라우저에서는 보안 상의 이유로 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다고 한다.
즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있는 것인데
이것을 동일 출처 정책(same-origin policy)

어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다.
동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 가능한 공격 경로를 줄이는데 도움을 줍니다.
-MDN-

라고 하며 이것 때문에 정상적으로 데이터를 받을 수 없게된 것이다.

🍭

고로 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

profile
좌충우돌 우당탕탕 험난한 개발 여정기

2개의 댓글

comment-user-thumbnail
2020년 3월 22일

이미지 직접 만드시는건가영 ㅎㅎ 너무 귀엽네영

답글 달기
comment-user-thumbnail
2020년 3월 24일

잘 읽었습니다! CORS 헤더에 대한 내용이 있어도 좋을 것 같네요!

답글 달기