#22 CORS 이슈, Proxy 설정

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다.

 

 

CORS(Cross-Origin Resource Sharing) 정책 때문에 보안을 위해서 서로 다른 오리진을 가진 서버끼리는 정보를 주고받을 수 없다.

여러 방법이 있지만 이 강의에서는 Proxy를 사용해 해결한다. 참고문서

 

1. http-proxy-middleware 설치하기 npm install http-proxy-middleware --save

2. src폴더에 setupProxy.js 파일을 생성한다

const createProxyMiddleware = require('http-proxy-middleware');

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

*Proxy 문서에는 const { createProxyMiddleware } = require('http-proxy-middleware'); 로 나와있지만 이렇게 작성했을 때 proxy is not function 오류가 발생함 → 이전에 강의를 수강하신 분의 도움으로 {}를 지우고 const createProxyMiddleware = require('http-proxy-middleware');로 진행했을 때 정상적으로 작동하는 것을 확인