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를 연결하는 방법도 작성되어있다. 참고하고 공부하자!
'SEB_FE_45(코드스테이츠) > section 4.' 카테고리의 다른 글
기술면접 블로깅 (0) | 2023.08.03 |
---|---|
[Deploy] CI/CD 과 (0) | 2023.08.01 |
AWS FE 배포 실습 과제 (0) | 2023.07.31 |
AWS BE 배포 실습 과제 (0) | 2023.07.31 |