프론트 포트 넘버와 서버 포트 넘버가 다르다. 이때, 양쪽 다 아무런 설정 없이는 CORS 정책 때문에 통신이 불가하다

CORS 정책

Cross-Origin Resource Sharing

포트 넘버(Origin)가 다른 두 서버가 Sharing 할 때, 적용되는 정책

두 Origin이 다를 때 소통할 수 있는 방법은?

Proxy

개발자 도구, JSON P 방식 등 여러가지 방식이 있지만, 그 중에서 Proxy를 사용해 두 Origin이 소통할 수 있게 하려한다.

설정

1. npm install http-proxy-middleware --save

2. src/setupProxy.js 파일 생성 후, 다음 입력

   const proxy= require('http-proxy-middleware');
   
   module.exports=function(app){
       app.use(
           '/api',
           proxy({
               target:'http://localhost:5000',
               changeOrigin:true,
           })
       );
   }

참고

www.inflearn.com/course/따라하며-배우는-노드-리액트-기본