[Deploy] CI/CD - Proxy

---

Proxy

• CORS
  • 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS) : 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
  • USER의 민감한 데이터의 보안을 위해 권한이 없는 접근을 제한
• 출처
  • URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의
  • 두 객체의 스킴, 호스트, 포트가 모두 일치하면 같은 출처
  • 일부 작업은 동일 출처 콘텐츠로 제한, CORS를 통해 제한을 해제 가능
• Proxy
  • 정석적인 CORS 설정 방법 : FE 개발자가 BE 개발자에게 FE개발 서버 도메인을 허용해 달라고 요청해야 하고, BE개발자는 응답 헤더에 필요한 값들을 담아서 전달해줘야 함
  • 위 과정 없이 React 라이브러리 또는 Webpack Dev Server에서 제공하는 proxy 기능을 사용하면 CORS 정책 우회 가능. 별도의 응답 헤더 받을 필요 없음

출처 : 코드스테이츠 / 좌 : 프록시 설정 전 , 우: 프록시 설정 후

---

Proxy 사용법

•  Webpack Dev Server
  • package.json 파일 하단에 proxy 속성 입력
  • fetch 또는 axios를 통해 요청하던 부분에서 도메인 제

출처 : 코드스테이츠

• React 라이브러리(http-proxy-middleware)
  • 라이브러리 설치 npm install http-proxy-middleware --save(--save는 npm 5 이후에는 추가로 쓰지 않아도 된다.)
  • 다만 React Proxy는  devDepndencies에 등록해서 쓰는 것이 좋다.
  • 라이브러리 설치 후, src 디렉토리 하위에 setupProxy.js 파일을 생성한다.(다른 이름으로 하지 않는다.)
  • 라이브러리 불러온 후, webpack dev server 에서 proxy를 설정한 것과 같이 fetch 또는 axios를 통해 요청하던 부분에서 도메인부분을 제거한다.

출처 : 코드스테이츠

---

회고

오늘 과제도 이게 잘된건지 안된건지 확인할 수가 없어서 참 답답했다.

일단 get요청은 여러개의 api, api2의 데이터도 잘 받아오는 걸 확인할 수 있었다.

단.. proxy 설정할 때, 변경사항이 있다면... api 서버와 클라이언트를 종료했다가 다시 작동시켜야 한다.

잘 고쳐놓고 새로고침만 했더니 불러오라는 데이터는 안가지고 오고, 아래 에러만 계속... 

속시원히 껐다가 다시 켜자..

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON 

위의 에러는 아래 레퍼런스를 통해 해결했다.

섹션 4의 마지막 유닛이 끝났다! 이제 프로젝트 시작인데.. 잘 할 수 있겠지?ㅎㅎ

부족한 부분은 복습하면서 프로젝트 재미있게 참여해보자! 화이팅!

---

레퍼런스

1) 위의 에러를 해결할 수 있게 힌트를 준 블로그!!

 - React Proxy 라이브러리를 이용할 때, 라우터를 이용해 여러 api를 연결하는 방법도 작성되어있다. 참고하고 공부하자!

https://haruisshort.tistory.com/228

<React> React에서 Proxy로 CORS 에러 다루기