[TS_React] setupProxy.js 로 CORS 에러 해결하자

TS

:Trouble Shooting

 

 

Proxy 설정은 왜 할까

서버와 클라이언트를 통신할 때 CORS 헤더를 통해 통신을 진행하는데 이런 CORS 를 통한 통신은 통신을 주고받는 통신 주체들의 도메인, 프로토콜, 포트 등이 일치하는지 확인한다. 프로젝트를 진행함에 있어 서버와 프론트의 도메인, 프로토콜, 포트가 일치하는 않는 경우에 CORS 에러가 나는 이유가 바로 이런 접근 권한 확인 과정을 거치기 때문이다.

 

서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하게 하는 프록시 서버를 설정하면 위와 같은 문제를 해결할 수 있다. 

 

 

Proxy 서버 설정 방법

proxy 서버를 설정하기 위해서는 2가지 방법이 존재한다.

 

1. package.json 파일에서 설정

"proxy" : "{통신할 서버 주소}"

 

2. setupProxy.js 파일 생성

// module import -> npm install http-proxy-middleware
// src/setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");

// src/setupProxy.js
module.exports = function (app) {
  app.use(
    createProxyMiddleware("/api", {
      target: "{통신할 서버 주소}", // 비즈니스 서버 URL 설정
      changeOrigin: true,
    })
  );
};

http-proxy-middleware 모듈 import

 

 

해당 어플리케이션에서 /api 로 시작되는 endpoint 가 서버에 어떠한 통신을 요청한 경우 proxy 서버가 중계 역할을 하며 target으로 지정한 {통신할 서버 주소} 로 통신하면서 서버를 우회함을 의미한다.

 

 

 

 

 

 

결론은 프록시 서버를 둬서 cors 에러를 간접적으로 해결 가능하다!