PROXY

❓ 실제 서버 운영 시

• 실제 서비스의 경우 백엔드 서버와 같은 origin에서 제공이 되기 때문에 CORS 정책이 문제되지 않는다.

  예) naver.com/ (클라이언트와 서버가 같은 origin을 공유하기 때문에 이 때부터는 fetch에 상대경로만 적어두면 잘 작동함.)

❓ 웹 개발을 할 때는?

• 웹 개발을 할 때는 두개의 서버가 필요(백엔드 서버 - React Dev Server)

• React Dev Server는 npm start 하면 실행되는 서버임.

예) 백엔드 서버는 포트 8000 / 리액트 서버는 포트 3000 을 부여

• 한 컴퓨터에서도 각각의 서버를 식별 가능하게 하기 위해서
  백엔드 서버와 리액트 데브 서버의 포트를 다르게 부여

• npm start -> 브라우저가 리액트 데브 서버(포트 3000)으로 접속 -> 리액트 데브 서버에서 HTML, CSS, JS 등을 응답 -> (단 웹 앱이 데브 서버만으로 운영되는 경우는 거의 없음) -> 다른 데이터들을 백엔드 서버(포트 8000)에 요청
  
  

• fetch('http://localhost:8000/api_path')

🧨 여기서 CORS 문제가 터짐.

• 실 서비스와 달리 개발할 때에는 리액트 데브 서버는 포트3000, 백엔드 서버는 포트8000으로 오리진이 달라져버리기 때문에 CORS의 Same Orgin Policy에 의해 에러가 나버린다.

• 문제 하나 더! COOKIE
  서버는 인증을 통해 클라이언트에 토큰을 부여하고 클라이언트는 토큰을 쿠키에 두고 해당 서버 방문 시 인증 수단으로 쿠키를 제공하는데 이것 또한 CORS 정책에 위배되어 쿠키가 자동으로 리퀘스트에 포함되어 전송되지 않는다.

이를 해결하려면 백엔드에서 클라이언트의 오리진을 허용 설정해둬야 한다.
또한 쿠키의 경우 Credential:true 설정을 해줘야 자동으로 쿠키가 전송된다.

❓그럼 백엔드에서만 이 문제를 해결할 수 있는가?

• CRA의 proxy 기능을 통하여 해결 가능하다.
• proxy는 "대신하다"라는 의미이다.
• 프록시 설정을 해두면 브라우저에서 직접 백엔드 서버에 요청을 보내지 않는다.
• fetch에 상대경로만 설정해두면
• 리액트 데브 서버에서 이 요청에 해당하는 정보를 우선 탐색한 후에
• 데이터가 없으면 브라우저를 대신하여 Proxy에 설정해둔 origin의
• 백엔드 서버에 데이터를 요청 / 응답받아 브라우저에 응답을 해준다.

CORS 에러는 당연히 뜨지 않음!!

어떻게 설정하는데?

-package.json파일 아무데나
"proxy":"url" 넣어주면 됨.

추가) 백엔드 api가 여러개인 경우 npm proxy-middleware
나중에 공부해서 정리해보기

• 배포할 때 URL이 다르다면?
  API가 동일한 도메인에서 제공이되는 경우는 문제 없지만 API의 도메인과 서비스의 도메인이 다르다면 axios의 글로벌 baseURL을 설정하면 된다.

CORS 해결 방법 참고하면 좋은 것들.
CRA proxy 서버 설정 (FE)
netlify 호스팅 CORS 에러 해결
웹소켓 proxy 설정
추가 이해 링크