부산 API를 이용한 미니 프로젝트 - 5 Proxy server를 이용한 CORS에러 해결

CORS

다른 출처 간에 리소스를 전달하는 방식을 제어하는 체제이며, CORS 요청이 가능하려면 서버에서 특정 헤더인 Access-Control-Allow-Origin과 함께 응답할 필요가 있다.
예를 들어, 클라이언트포트가 3000번이고 서버 포트가 8000번일 때 클라이언트에서 서버로 리소스를 요청했을 때 CORS에러 메시지가 클라이언트 콘솔에 뜨고 데이터를 주지 않게 된다.

서버는 데이터를 제공해주는데 이게 브라우저와 포트가 맞지 않는다.
서로 포트가 맞도록 해주면된다.

해결 방법

중간 서버를 거쳐서 요청을 보내는 방법

1. 헤로쿠서버(현재는 막힘)

2. proxy 서버 만들기

참고

공공 데이터 포탈에서는 데이터를 가지고 오기만 하지 데이터를 변경하지 못하기 때문에 CORS를 막아둘 필요가 없지만 아마 어떠한 정책이 있기 때문에 막아놓은 것이라고 하신다.

LIBRARY

• express
• cors
• axios

백엔드 배포 express로 만든 서버 vercel로 배포
참고