React CORS 이슈 해결 (XMLHttpRequest.handleError)

현재 프론트엔드(React), 벡엔드(Node)를 분리하여 프로젝트를 진행중에 있다. 그래서 당연히 포트가 다르다. 나는 노드측에서 CORS 설정을 해두었기에 프론트엔드 단에서는 별 다른 설정이 필요없다고 생각했다.

그러나 노드의 응답을 리액트에서 받지 못하는 것 같았고, XMLHttpRequest 에러가 발생했다.

at createError (createError.js)
at XMLHttpRequest.handleError (xhr.js)

확인 후 알아낸 것은, React에서도 cors에 대한 설정이 필요하다는 것이다. 프록시 설정으로 간단하게 해결할 수 있다.

React의 package.json에

{
  "name": "lazy-dolphin",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:4000", // Proxy 추가
  "dependencies": {

proxy에 노드의 주소를 추가하면 된다. 프록시를 설정하면 REST 요청을 보낼 때 http://localhost:4000/signup이 아닌 /signup으로 요청해도 알아서 프록시 서버로 데이터를 주고 받으니까 편리하다.