[React] CORS 에러 해결하기

CORS (Cross-Origin Resource Sharing)

한 웹 어플리케이션이 다른 출처에 존재하는 자원에 접근하고 싶다면? 접근 권한을 줄 수 있도록 브라우저에 알려주는 체제인 CORS를 이용해야 한다. 예를 들어 한 컴퓨터의 로컬에서 Spring Boot를 8080 포트로 띄우고, React를 3000 포트로 띄웠다고 가정하자. 이 둘은 포트가 다르므로 다른 출처임을 알 수 있다. React가 Spring Boot의 API를 호출하려고 할 때, 출처가 다르므로 접근 권한이 없다며 CORS 에러가 발생한다.

 

 

제한된 교차 출처 HTTP 요청

그렇다면 그냥 접근 권한을 서로 열어두면 편하지 않을까?라는 생각이 들 수 있다. 브라우저의 교차 출처 HTTP 요청을 제한하는 건 보안을 위해서다. 서로 다른 출처를 가진 두 애플리케이션이 마음대로 서로를 접근할 수 있는건 매우 위험하다. 크롬에서 F12를 눌러 개발자 도구만 열어봐도 어떤 서버와 통신하고 어떤 정보를 주고 받는지 등등 여러 정보를 제재없이 열람할 수 있다. 다른 출처를 가진 애플리케이션에 접근 제한이 없다면 XSS나 CSRF 등을 통해 중요한 데이터를 빼가는게 매우 쉬워진다.
 중요한 점은 이 CORS를 확인하는 로직이 서버가 아닌 브라우저에 구현되어있다는 점이다. 그러므로 Postman 같은 툴을 이용해 API 요청을 보낼 때는 CORS 에러가 발생하지 않는다.

 

 

💡 CORS 에러 해결 방법

 CORS가 어떻게 동작하는지 알아보며 에러를 해결해보자.

 기본적으로 웹 클라이언트 어플리케이션은 다른 출처의 리소스를 요청할 때 HTTP 프로토콜을 사용한다. 이때 브라우저는 요청 헤더에 Origin이라는 필드에 출처를 함께 담아보낸다. 이후 서버가 이 요청에 대한 응답을 할 때 Access-Control-Allow-Origin 이라는 값에 이 리소스에 접근하는 것이 허용된 출처를 내려준다. 응답을 받은 브라우저는 브라우저가 보냈던 Origin과 서버에서 받아온 Access-Control-Allow-Origin 두 값을 비교한다. 그 후 이 응답이 유효한지 아닌지를 결정한다. 이제 오류를 살펴보자.

Access to XMLHttpRequest at 'http://localhost:9344/token' 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.

뭐가 읽히기 시작한다! 문제는 Access-Control-Allow-Origin 값을 못 받았다는 점이다.