오류 | 외부 API 호출(feat. React)

Access to fetch at ''url"  from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

 

❓상황

fetch를 이용하여 한국환경공단_에어코리아_대기오염정보 API 호출시 발생한 오류

 

🔎 원인 파악

외부 API 접근시, 브라우저가 클라이언트의 Origin값과 외부 API 서버의 Access-Control-Allow-Origin의 설정값이 허용하지 않아 브라우저가 응답을 거부한 상태

 

 

✨ 해결 방법

1. package.json 파일에 proxy 주소값을 추가

 

2. url 입력시 proxy에 입력한 주소를 제외한 나머지 주소 입력

 

proxy 주소값을 추가하여, 해당 주소에 간접적으로 접속한다.

Origin값과 상관 없이, 해당 주소인척하면서 API의 데이터를 호출할 수 있다.

 

단, 이 방법은 개발할때만 CORS 오류가 안나고, 실제 서비스 구축시에는 CORS 오류가 발생한다.

이를 해결하기 위해서는 실제 백엔드 서버를 구동하여 CORS 오류를 해결해야한다.