[웹개발101] CORS 에러

에러 내용

Access to fetch at 'http://localhost:8080/todoapi' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

 

현재 백엔드 서버와 프론트 엔드 구현부를 연결하는 것을 진행하고 있다.

해당 에러는 보안을 위한 CORS 헤더 Policy를 위반했기 때문에 나타난다.

 

CORS
Cross-Origin_Resource_Sharing 크로스 오리진 리소스 쉐어링의 약자로, 처음 리소스를 제공한 도메인(Origin)이 현재 요청하려는 도메인과 다르더라도 요청을 허용해주는 웹 보안 방침이다.

 

해당 error가 난 이유는 프론트엔드 서버 도메인(localhost:3000)으로 백엔드 서버의 도메인(localhose:8080)에 접근하려 했기 때문이다.

 

해당 오류를 해결하기 위해서는 백엔드에서 CORS 방침 설정을 해주면 된다.

 

1. config 패키지 생성

2. config 자바파일 생성

3. WebMvcConfigurer 인터페이스 상속 및 스프링 빈으로 등록

4. 모든 경로에 대해 Origin이 http://localhost:3000/인 경우, "GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS" 메서드를 이용한 요청을 허용한다.

5. allowCredentials : 모든 헤더와 인증에 관한 정보도 허용한다.

 

에러가 사라졌다 !