WIL (Weekly I Learned) 2월 2째주

<배운 것> 

 

1. CORS란, (= Cross Origin Resource Sharing )

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

즉 서로 다른 도메인간에 자원을 공유하는 것을 의미하며 기본적으로 차단되어있다.

Origin이란 출처를 의미하며 Protocol + Host + Port 를 합친 것을 말한다.

 

2. SOP, Same-Origin Policy

보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP요청을 제한한다. API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야한다.

즉 Origin이 같으면 CORS 에러는 발생하지 않는다.

예를 들어 아래 개발 환경은 포트가 다르기때문에, Origin이 다른 것으로 판단되어 자원 요청 시 CORS 에러가 발생한다.

http://localhost:8080

http://localhost:8000 

 

3. CORS 에러 해결 방법

서버에서 응답 헤더에 특정 헤더를 포함하는 방식으로 해결할 수 있다.

Access-Control-Allow-Origin: 특정 브라우저가 리소스에 접근이 가능하도록 허용한다.

Access-Control-Allow-Method: 특정 HTTP Method만 리소스에 접근이 가능하도록 허용한다.

Access-Control-Expose-Headers: 자바스크립트에서 헤더에 접근할 수 있도록 허용한다.

credentials: 쿠키 등의 인증 정보를 전달할 수 있다.

 

4. CORS 정리

CORS란 서로 다른 Origin간에 자원을 공유하는 것을 말하며 기본적으로 브라우저간에 차단되어있다.

Origin이란 출처를 말하며, Protocol + Host + Port 를 합친 것을 의미한다.

CORS 에러는 서버에서 응답 헤더에 특정 헤더를 포함하는 방식으로 해결할 수 있다.

예를 들어 Access-Control-Allow-Origin을 통해 특정 브라우저가 리소스에 접근이 가능하도록 허용할 수 있다.

---

<생각>

미니프로젝트를 시작하기 전 CRUD의 개념이 부족해 잘 익히기 위해서 간단한 CRUD인 게시판 만들기를 연습하였다. 한 7번 직접 타이핑해서 만들어보니...안보고도 칠 수 있게 머리에 코드들이 저장이되어버렸다... 그러면서 controller, service, repository 의 관계들이 조금씩 이해가 되었다. 다만 이 방식으로 미니프로젝트 때도 게시판 만들기를 하려했으나 이전 연습했던 방식인 동적프로그래밍과는 다르게 @Restcontroller 를 사용하여 Json으로 데이터만을 보내주는 방식으로 해야해서 이전에 연습했던 방식으로는 똑같이 할 수가 없었다. 프로그램에는 정답이 없고, 여러 구현방식이 있다는 것을 새삼 깨달았다. 이전 코드와 방식에 집착하지 않고 새로운 코드와 방식을 기쁘게 받아들이는 개발자가 되어야겠다.