[React/Node.js] CORS 이슈, Proxy 설정

✅ 문제 상황

Access to XMLHttpRequest at 'http://localhost:5000/api/hello' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

✅ 오류 원인

서버는 포트가 5000이고 클라이언트는 포트가 3000이기 때문에 발생하는 오류이다.
이렇게 두 개의 다른 포트를 가지고 있는 서버는 아무 설정 없이 Request를 보낼 수 없다.
CORS(Cross-Origin Resource Sharing) 정책 때문에 보안을 위해서 막아버린다.

✅ 해결 방법

여러가지 방법이 있는데, Proxy 사용하는 방법으로 할 수 있다.

설치

npm i http-proxy-middleware --save

Proxy를 사용해 타겟을 5000으로 주면 오류 해결!

//src/setupProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:5000",
      changeOrigin: true,
    })
  );
};

참고)

Proxying API Requests in Development | Create React App