CORS가 무엇이고 왜 나타났을까?

SOP란?

same-origin policy(동일출처 정책)으로 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식이다.

악성 url로 접속하는 상황등을 막기위해 하나의 웹은 하나의 서버의 연결만을 허용하는 정책이다.

CORS란?

간단히 말해서, 교차 출처 리소스 공유이다.

추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

• 브라우저에서 보안적인 이유로 cross-origin HTTP 요청을 제한한다.
• cross-origin 요청을 하려면 서버의 동의가 필요!
• 동의한 브라우저만 요청을 허락하고, 아니라면 브라우저에서 거절한다.

⇒ 허락을 구하는 메커니즘을 HTTP-header를 이용해서 가능하다!

CORS는 언제 발생하나?

CORS 에러는 클라이언트와 서버의 origin이 달랐을 때 응답을 받지 못하도록 막기 때문에 발생하는 에러

1. 프로토콜이 다를 때
   1. http와 https는 다르다!
2. 도메인이 다를 때
   1. domain.com과 other-domain.com은 다르다!
3. 포트번호가 다를 때
   1. 8080포트와 3000번 포트는 다르다!

위 3가지(프로토콜, 도메인, 포트번호)는 동일 출처의 조건과도 같다!

access-control-allow-origin 응답 헤더 설정(Server)

1. Access-Control-Allow-Origin을 응답 헤더에 넣어 접근 권한 설정 해주기.

response.header("access-control-allow-origin", "*") 
response.header("access-control-allow-origin", "http://localhost:5000")

1. 모든 origin요청을 허용한다 (모든 요청을 받기에 보안이 취약하다)

"access-control-allow-origin": "*"

1. 특정 origin요청만을 허용한다.

"access-control-allow-origin": "http://localhost:5000"