CORS

CORS란?

MDN의 정의

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)는, 추가 HTTP 헤더를 사용하여 한 URL에서 실행 중인 웹 App이 다른 URL의 선택된 resource에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다

 

죽어도 양반은 못되나보다. 교과서스러운 정의가 맘에 안든다....

 

내 블로그니까 내 맘대로 정리한다

 

CORS는 왜 존재하는가?

• 브라우저(프론트)가 약속돼있던 서버가 아닌 다른 서버는 믿지 못하기 때문
• 내가 iamjooon2.com의 호스트일때, 브라우저 입장에서 개발하고 있는 사이트 외에 다른 수상한 웹이다..
• (실제로 예전같은 경우, 다른 웹에서 자원을 떙겨쓸 일이 매우 적었다고 함)
• 하지만 웹이 발달하며, 여러 웹끼리 서로 데이터를 주고받아야 하는 일들이 많이 생김
• 그래서 생겨난 것이 바로 이 CORS! 여러 출처끼리 리소스를 주고받게 해준다

CORS는 어떻게 동작하는가?

1. 브라우저가 원래 출처(resource)가 아닌 다른 출처에다가 request을 보낼때
2. header에 Origin이라는 넘을 추가해준다
3. request를 받은 서버는 response를 보내주는데
4. response의 header에 지정된 해당 출처(서버 입장에서 브라우저)를 허용한다는 내용를 담아서 브라우저로 보내준다
5. 브라우저는 request의 header와 response의 header를 비교하여 origin에 추가해준 내용이 있으면 안전한 요청으로 간주,
   리소스를 받아온다

내맘대로 정의

• 서로 다른 출처끼리 정보 요청과 반환이 가능하도록 하는 하는 것

내맘대로 예

• 내 웹에서 네이버 지도의의 API를 사용하고 싶을 때...
• 브라우저에서는 내 웹이 아닌 다른 리소스는 신뢰하지 않아서 리소스 공유를 막아버림.
• 이 정책이 SOP(Same Origin Policy)고 이걸 가능하게 풀어주는 것이 CORS

해결 방법

서버에서 Access-Cross-Origin Header를 심어 넣어준다

 

추가 개념들

SOP(same origin policy, 동일 출처 정책)

같은 URL에서만 API 같은 데이터 접근이 가능하도록 하는 정책.

이 정책 때문에 다른 웹끼리 데이터를 공유하려 할 땐 CORS를 이용하여 풀어줘야함

 

출처(Origin)

대충 URL의 개념

 

자원(Resource)

직역 그대로 자원

그냥 주고받는 데이터

 

scheme

요청한 자원에 접근할 방법, 프로토콜

 

Access-Control-Allow-Origin

다른 출처에서 req를 받은 서버가 res 보낼때 헤더에 넣어주는 “ㅇㅋ 거기는 약속되있던거임. 허락하노라”이라는 뜻의 헤더.

 

 

References

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

https://www.youtube.com/watch?v=7iGIfcEsc2g&t=604s&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9CTech