# CORS

By [Primrose](https://paragraph.com/@primrose) · 2023-10-18

---

웹 개발자라면 한번쯤은 봤을 법한 `CORS(Cross-Origin Resource Sharing)` 정책에 대한 이야기를 해보자.

Definition
==========

CORS는 `Cross-Origin Resource Sharing`의 줄임말로, 한국어로 직역하면 교차 출처 리소스 공유라고 해석할 수 있다.

브라우저에서는 보안적인 이유로 `cross-origin` HTTP 요청들을 제한한다.

그래서 `cross-origin(교차 출처)` 요청을 하려면 서버의 동의가 필요하다.

만약 서버가 동의한다면 브라우저에서는 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절한다.

따라서 CORS 관련 이슈는 모두 CORS 정책을 위반했기 때문에 발생하는 것이다.

Cross-origin
=============

`cross-origin`이란 다음 중 한 가지라도 다른 경우를 말한다.

1.  프로토콜 : http vs https
    
2.  도메인 : abc.com vs def.com
    
3.  포트 번호 : 80 vs 8080
    

같은 프로토콜, 호스트, 포트를 사용한다면, 그 뒤의 다른 요소는 다르더라도 같은 출처로 인정된다.

반대로 프로토콜, 호스트, 포트 중 하나라도 자신의 출처와 다를경우 브라우저는 정책상 차단하게 된다.

출처를 비교하는 로직은 서버에 구현된 스펙이 아닌 **브라우저에 구현된 스펙**이다.

따라서 브라우저를 통하지 않고 서버 간에 통신을 할때는 정책이 적용되지 않는다는 말과 같다.

Operation
=========

### **1\. Client에서 Request Header 에 Origin 정보 추가**

### 2\. Server는 Response Header에 Access-Control-Allow-Origin 정보 추가

### 3\. Client는 보낸 Origin과 받은 Origin 비교

Source
======

[https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F#CORS\_%EA%B8%B0%EB%B3%B8\_%EB%8F%99%EC%9E%91%EA%B3%BC%EC%A0%95](https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F#CORS_%EA%B8%B0%EB%B3%B8_%EB%8F%99%EC%9E%91%EA%B3%BC%EC%A0%95)

---

*Originally published on [Primrose](https://paragraph.com/@primrose/cors)*