local에서 API 요청시 CORS 문제 해결

보통 open API는 모든 도메인이 접근할 수 있는 CORS 설정을 해놓지 않는다. 그렇기 때문에 local에서 API요청을 보낼 경우 CORS 에러가 뜨는 것이 대부분이다. 이 문제를 해결하기 위한 방안으로 웹팩 개발서버의 proxy 설정을 통해서 CORS error를 해결할 수 있다.

 

 

package.json 파일에 다음과 같이 추가한 후

"proxy": {host주소} 

//API가 https://kauth.kakao.com/oauth/authorize 라면
//"proxy": "https://kauth.kakao.com"

API 요청을 보낼 때 host 주소를 제외한 URL만 적어서 요청을 보내면 된다.

//API가 https://kauth.kakao.com/oauth/authorize 라면
fetch("/oauth/authorize")
.then((res) => res.json)
.then((res) => console.log(res))