express에서 CORS 해결 : cors 모듈 / React Proxy 설정

(NodeJS) Access-Control-Allow-Origin(CORS) - CORS, CORB 요청 허용하기

 

CORS문제는 express로 만든 백단에서 cors 패키지를 설치해서 아래와 같이 미들웨어로 처리해주면 너무나도 쉽게 해결됩니다. 특정 route에서만 허용하고 싶다면 해당 경로를 처리하는 컨트롤러에 넣어주면 됩니다.

 

const cors = require("cors");

const app = express();

// middleware
// 허용할 주소를 넣어줍니다.
app.use(cors({ origin: "http://localhost:3000/" }));

 

 

만약 cors가 아니라 프론트(React라 가정)단에서 Proxy를 설정하여 CORS 문제를 해결하고 싶다면 그렇게 해도 됩니다.

지금까지는 간단하게 package.json에 다음과 같이 간단히 적어주었습니다.

 //package.json
 
 "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5000/"
}

 

그러나 제 경험상 이 방법은 대개 안됩니다.

axios를 보낼 때는 다음과 같이 baseURL을 강제해서 보내는 게 마음 편합니다.

그러나 이 방법은 백단과 소통이 많아질 경우 매번 작성해야하며 무엇보다 빌드할 때 일일히 찾아서 다 지워줘야 한다는 단점이 있습니다.

axios.defaults.baseURL = "http://localhost:5000/";

 

 

정식으로 프록시를 사용하고 싶다면 다음 패키지를 이용합시다.

 

Create React App · Set up a modern web app by running one command.

 

npm install http-proxy-middleware --save

 

설치 후에 문서에서 설명한대로 폴더에 다음과 같이만 입력해주면 자동으로 proxy 설정이 완료됩니다.

빌드할 때도 따로 지울 필요 없습니다. 편리~

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

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      // proxy할 주소, 즉, 백단의 주소를 적어줍니다.
      target: "http://localhost:5000",
      changeOrigin: true,
    })
  );
};

Note: You do not need to import this file anywhere. It is automatically registered when you start the development server.

 

아, 그리고 한번 껐다가 다시 켜주셔야 합니다.