Proxy

🔥 CORS

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

CORS 에러를 해결하는 방법

webpack dev server proxy

webpack dev server의 proxy를 사용하게 되면, 브라우저 API를 요청할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 개발 서버의 주소로 우회 요청을 하게 된다.

1. 프론트엔드 단에서 proxy를 설정
   CRA를 통해 만든 리액트 프로젝트에서는 package.json 에서 "proxy" 값을 설정하여 쉽게 적용할 수 있도록 구성이 되어 있다.

...
"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
	"proxy" : "우회할 API 주소"
}

export async function getAllfetch() {

    const response = await fetch('우회할 api주소/params');
    .then(() => {
			...
		})
}

// 기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거 
export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}

2. React Proxy 사용법

🔥 Proxy