상황

1. 원격 서버에서 Springboot 실행
2. 로컬에서 Axios를 사용해 원격 서버로 GET 요청
3. Cors Policy 두두등장

Cors Policy는 전에도 발생했어서 가볍게 생각했는데 그땐 내가 쓰는 서버가 1개였고 지금은 2개가 되어서 다시 해결 방법을 찾아봤다.

Cors를 다시 이해해보자

왜 데이터를 쉽게 넘겨주지 않는가?

먼저,

SOP (Same Origin Policy)란? 다른 출처의 리소스 사용을 제한하는 보안 정책

여기서 출처란 URL의 구성이다. URL의 구성에는 프로토콜, 호스트, 포트번호 총 3가지가 해당된다.

SOP는 사용자 요청의 출처(origin)를 확인하고 응답을 하기 때문에 해킹범의 이상한 요청을 무시할 수 있다.


잠깐❗ http://localhost:8080과 http://127.0.0.1:8080 은 같을까❓

우리가 생각하기엔 같다. 그러나 보안 정책 입장에서는 다르다.
URL을 문자열 값으로 비교하기 때문이다. (이거 몰라서 왜 안 되냐고 혼자 씅냄)

그럼 Cors는 뭘까?

CORS (Cross-Origin Resource Sharing)란? 교차 출처 리소스 공유

SOP와는 다르게 다른 출처의 자원을 공유할 수 있다는 말이다.
추가 HTTP 헤더를 사용하여 브라우저에게 접근이 가능함을 알려야 한다.

자바스크립트는 기본적으로 서로 다른 도메인에 대한 요청을 보안상 제한하기 때문에 Cors 처리가 중요하다!

해결 방법

1. 클라이언트 측
요청을 보낼 때 { withCredentials = true } 속성을 같이 보낸다.

• credentials이란 쿠키, 인증헤더, TLS client certificates(증명서)를 말한다.
  클라이언트의 자격 증명을 안전하게 포함시킬 수 있으며, 서버 측에서 이를 확인하고 인증 및 세션 유지와 같은 기능을 작동시킬 수 있다.

2. 서버 측
컨트롤러에 접근 할 출처를 명시해준다.
@CrossOrigin(origins = "http://127.0.0.1:8080")

• Spring RESTful Service에서 CORS 설정을 @CrossOrigin 어노테이션을 사용해 해결 가능하다. controller 클래스 자체 또는 특정 REST API 메서드에 설정할 수도 있고, 특정 도메인의 접속만 허용할 수도 있다.
  나는 내가 띄운 클라우드 서버의 도메인을 명시해했다.