Cors(Cross Origin Resource Sharing)

교차 출처 리소스 공유 (CORS)

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

 

 

API로 정보를 받아오기 위해 프론트에서 HTTP요청을 보냈을 때 미리 설정을 해주지 않으면 Cors문제로 막힘


어디서 부터 보낸 요청이 막히는가?

정답:
브라우저: SOP(Same Origin Policy)를 통해서 이를 막음

왜?
어떤 홈페이지에 접속한다는것은 그 사이트의 HTML, CSS, JS가 코드가 내 브라우저에 받아진다는것
이 JS코드로 뭔가 장난을 쳐서 내 크롬 한테 무슨짓을 시킬 지 모름!
착한닷컴으로 부터 내 개인정보를 조회하는 요청에 크롬에 저장된 착한닷컴 토큰을 실어서 착한닷컴에
보낸다음 그걸로 탈취한 정보를 나쁜닷컴 서버로 보내버릴 수도 있는것

 API에다가 js로 

이걸 풀어주는 역할이 CORS

 

 

 

어떤 기준을 충족시키면 리소스 공유가 되도록 만들어진 메커니즘
어떤기준: 요청을 받는 백엔드 쪽에서 이걸 허락할 다른 출처들을 미리 명시 해두면 되는것

이곳에 허용할 사이트들을 적어주면 거기서 지정한 사이트에서는 이 서버로 얼마든지 HTTP요청을 보낼 수 있는것

심화
미친토끼->네이버 지도API로 요청을 보냄 cross-origin요청
브라우저가 요청에 Origin이라는 header를 추가(cross-origin요청의 경우)
header: 받는쪽IP주소, 사용할 프로토콜, 옵션 등이 담김
요청하는쪽의 scheme과 도메인, 포트가 담김.
scheme이란 요청할 자원에 접근할 방법 http, ftp, telnet등(프로토콜)

이 요청을 받은 네이버API지도 서버는 답장의 헤더에 지정된 Access-Control-Allow-Origin정보를 실어서 보냄
미친토끼닷컴이 등록된 상태면 그 url도 들어있음

즉, Origin에서 보낸 출처값이 서버의 답장 헤더에 담긴 Access-Control-Allow-Origin에 똑같이 있으면, 안전한
요청으로 간주하고, 응답 데이터를 받아오게 되는 것.

없으면 시뻘건에러


그리고 토큰 등 사용자 식별 정도가 담긴 요청에 대해서는 보다 엄격.

보내는 측:에서는 요청의 옵션에 credentials 항목을 true로 세팅해야함
받는쪽: 보내는쪽의 출처 웹페이지 주소를 정확히 명시한 다음
Access-Control-Allow-Credentials항목을 true로 맞춰줘야함

 

 

 

 

 

 

 

 

출처:https://www.youtube.com/watch?v=bW31xiNB8Nc&list=PLpO7kx5DnyIEXyPYwOk4YFFmtz5yz1v36&index=4

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS