3.3.1 CORS

먼저 프론트엔드와 백엔드를 연결하기 위해서 아래와 구현하고 실행시킨다.

localhost:3000으로 들어가서 개발자 툴의 콘솔 창을 확인하면 아래와 같은 에러가 나온다.

이 이유는 보안을 위한 CORS 헤더 Policy를 위반했기 때문이다.

CORS

CORS란?

처음 리소스를 제공한 도메인이 현재 요청하려는 도메인과 다르더라도 요철을 허락해주는 웹 보안 방침이다.

에러난 이유

1. 프론트엔드 서버의 도메인은 http://localhost:3000 이다.
   -> 현재 Todo페이지의 origin은 http://localhost:3000 이다.

2. 하지만 백엔드 서버의 도메인은 http://localhost:8080 이다.
   -> 도메인이 다르므로 요청을 거절한다.

CORS를 가능하게 하기 위해서는 백엔드에서 CORS 방침을 설정해줘야 한다.

위의 코드를 해석하면

• 모든 경로에 대해서 Origin이 http://localhost:3000 이면 GET, POST, PUT, PATCH, DELETE 메서드를 이용한 요청을 허용한다.
• 모든 헤더와 인증에 관한 정보도 허용한다.

이후 다시 실행하면 더 이상 CORS 에러가 나지 않는 것을 확인할 수 있다.