미니프로젝트-CORS 에러

한동훈·2022년 8월 16일
0

항해99

목록 보기
21/29

CORS란?
같은 주소, 같은 포트에 있는 리소스를 불러올 때는 문제가 없지만 다른 출처의 리소스를 요청하게 되면 보안적인 문제로 기본적으로 이를 차단함.
CORS (Cross Origin Resource Sharing) : HTTP 헤더를 사용하여 브라우저가 한 출처에서 실행중인 웹 애플리케이션에 선택된 액세스 권한을 부여하도록하는 메커니즘

에러 코드:

Access to XMLHttpRequest at 'http://3.37.127.16:8080/api/members/idcheck' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

프론트엔드쪽 회원가입을 할 떄, 아이디를 입력했을 때, 위와 같은 CORS에러가 발생하였다.
구글링을 해보면, 에러가지 해결 방법이 있지만...

일단 임시 방편..ㅠㅠ

모든 Controller에 아래와 같은 코드를 붙여준다.
@CrossOrigin(origins = "http://localhost:3000")

CrossOrigin 어노테이션

CrossOrigin 어노테이션을 사용하는 방법은 매우 간단하다.
컨트롤러에서 특정 메서드 혹은 컨트롤러 상단부에 @CrossOrigin 만 추가하면 된다.
설정 방법은 2가지가 있는데,

1.컨트롤러 클래스 단에서 설정
2.메서드 단에서 설정

둘중 하나의 방법만 사용해도 된다.

하지만 단점이라고 한다면 컨트롤러가 많을 수록 설정해야하는 어노테이션이 많아진다는 것이다.

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

profile
돌덩이

0개의 댓글