CORS 해결하기, 3가지 방법

CORS

• 에러나 오류가 아니다.
• Cross-Origin Resource Sharing Policy이다.
• Front와 Back을 나눌때 개발을 할 때에는 단순히 Front에서 fetch 요청으로 Back을 바라보고 날리면 될줄 알았는데
• 하나의 보안 정책이다.
• 현재 IP가 아닌 다른 IP로 리소스를 요청하는 구조

 

발생하는 이유는?

• Origin
  1. 요청이 시작된 서버의 위치를 나타내는 문구
     1. Client 서버 ( http://client:80 )
     2. 로그인 API 서버 ( http://login:3000)
     3. 이 2개의 IP는 서로 다른 IP의 번호를 가짐. 클라이언트 서버가 로그인 서버에게 HTTP 요청을 보낼 때 Origin이 다르다. ( 이를 Cross Origin )
  2. Origin을 구분할 때는 3가지를 이용한다.
     1. 스키마
     2. HOST
     3. Port
        1. https://tistory:80 경로가 있다면 여기에 스키마, host, Post 모두가 포함
           1. https : 스키마
           2. tisotry  : Host
           3. 80 : Port
• SOP
  1. Same Origin Policy
  2. 보안정책으로 동일한 출처의 Origin만 리소스를 공유할 수 있다.
  3. SOP 때문에 사실상 CORS 문제 허덕인다고 해도 과언이 아니다.
  4. SOP 표준에 따라야지 XX라던지 CSRF라는 보안상의 ISSUE를 막을 수 있게 된다.
• Access-Control-Allow-Origin
  1. Access-Control-Allow-Origin은 바로 CORS를 해결할 수 있다.
  2. SOP 정책에 따라서 같은 Origin의 자원만 공유 가능했지만, Access-Control-Allow-Origin 덕분에 서로 다른 Origin에서 자원 공유가 가능해진다.

 

CORS 동작 방식

🔽Cross Origin에서 자원을 요청하기 위한 과정

1. HTTP 통신 헤더인 Origin 헤더에 요청을 보내는 곳의 정보를 담고 서버로 요청 보내기
2. 이후 서버는 Access-Control-Allow-Origin헤더에 허용된 Origin이라는 정보를 담아 보내기
3. 클라이언트는 헤더의 값과 비교해 정상 응답임을 확인하고 지정된 요청 보내기
4. 서버는 요청을 수행하고 200OK 코드를 응답

 

참조 : https://wonit.tistory.com/307

---

3가지 방법

@CrossOrigin(origins = “허용주소:포트”)

https://wonit.tistory.com/572

[Spring Boot] CORS 를 해결하는 3가지 방법 (Filter, @CrossOrigin, WebMvcConfigurer)

+

https://jmlim.github.io/spring/2018/12/11/spring-boot-crossorigin/

스프링 부트에서 크로스도메인 이슈 처리하기. (@CrossOrigin 어노테이션을 사용) · 기억하기 위한