🍰 [221208 TIL] Proxy

✏️ 오늘 배운 것

Proxy

CORS 정책을 우회해서 응답을 전달하는 것

proxy 적용 전 흐름

proxy 적용 후 흐름

브라우저에서 API를 요청할 때, proxy를 통해 백엔드 서버로 요청을 ‘우회’

🍑 새롭게 알게 된 것

Use HTTP Protocol with Proxy

Proxy 사용법

webpack dev server proxy

npx create-react-app으로 리액트 프로젝트를 만들었다면 package.json에서 “proxy” 값을 설정 가능

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

기존의 fetch, axios 요청 부분에서 도메인을 제거

// 변경 전
export async function getAllFetch() {
	const response = await fetch('우회할 api 주소/params');
	...
}

// 변경 후
export async function getAllFetch() {
	const response = await fetch('/params');
	...
}