CORS error : access-control-allow-origin

오늘은 CORS 관련 오류 해결을 하나 스윽 적고 가려고 해요!

 

일단 마주한 에러는 제목과 같은 내용이며 프론트에서 fetch를 통해 rest api를 호출하는 과정에서 아래 사진과 같은 에러를 접했을 경우에 해결하는 방법에 대해 알아보도록 하자!

 

에러 내용은 아래 사진처럼 access to fetch at 'api 주소' from origin has been blocked by CORS policy 인데 개발을 시작했다면 볼 수 밖에 없는 에러이니 확실히 알고갑시다!

 

 

먼저 CORS 이슈가 뭔지 간단하게 알아보도록 할까요?!!

 

1. SOP (same-origin policy) 이란 ?

같은 Origin 으로만 요청을 보낼 수 있도록 제한되어 있는 보안 정책!

Origin의 구성은 URI Schema / Hostname / Port 로 여기서 하나라도 구성이 다르게 되면 SOP 정책에 어긋나기 때문에 fetch를 보낼 수 없도록 된다!

 

2. CORS (Cross - Origin - Resuource - Sharing) 란?

다른 Origin 끼리 요청을 주고 받을 수 있도록 정한 표준 정책

 

 

 

그렇다면 java spring 에서 해결할 수 있는 방법은??!!

정말 간단하게는 controller에서 origin을 사용할 프론트서버에 설정해주면 된다!

 

 

다음과 같이 사용할 컨트롤러에 @CrossOrigin 어노테이션을 이용하여 도메인을 설정해주면 된다!!

 

이 방법이 좋은 방법인지는 모르겠어서 일단은 이렇게 마무리하지만 더 좋은 방법이 있다면 그 방법으로 바꿔야겠다!

 

 

 

 

 

최근에 네이버 블로그를 계속 하다가 티스토리로 넘어오면서 그동안 네이버 블로그에 있던 글들을 옮기려 해요!

옮기면서 꾸준히 새로운 글을 업데이트 할텐데 이전의 블로그의 내용을 보고 싶다면 아래 링크를 통해서 들어올 수 있슴다~!!

https://blog.naver.com/glory4god

개발흔적 : 네이버 블로그