[네트워크] Proxy

hyxoo·2023년 6월 7일
0

코드스테이츠

목록 보기
37/37
post-thumbnail

📌 CORS

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.

✔️ CORS 에러 해결 방법

CORS 에러를 해결하려면 프론트엔드 개발자가 백엔드 개발자에게 프론트엔드 개발 서버 도메인을 허용 해달라고 요청하면 백엔드 개발자가 응답 헤더에 필요한 값들을 담아서 전달을 해줘야 한다.

📌 Proxy

위에서 설명한 정석적인 과정 없이 React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 proxy 기능을 사용하면 CORS 정책을 간편하게 우회할 수 있다. 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달한다. 즉, 브라우저를 proxy 기능을 통해 속이는 것이다.

✔️ Proxy 실습

  1. package.json 파일에 proxy 설정을 추가한다.
"proxy": "우회할 API 주소(서버 주소)"

  1. 기존 fetch/axios로 요청하는 부분의 도메인 부분을 제거한다.
export async function getAllFetch() {
  const response = await fetch('/params'); // 도메인 제거
  .then(() => {
    ...
  })
}

❗️ SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON 오류 발생

https://xionwcfm.tistory.com/340 을 참고해 해결

// .env 파일 추가
DANGEROUSLY_DISABLE_HOST_CHECK=true
profile
hello world!

0개의 댓글