[error] CORS error 해결 방법

 

 

 

 

지긋지긋한 CORS 에러를 마주했을 때, 내가 해결했던 방법이다.

 

1. cors-anywhere 오픈 프록시 서버

• 요청 URL 앞에 "https://cors-anywhere.herokuapp.com"을 붙이면 끗!
• 2021년 2월부터 데모 서버에 액세스하려면 옵트인이 필요
• 주기적으로 https://cors-anywhere.herokuapp.com에 들어가서 잠금 해제 버튼을 눌러야 함
• 결국엔 배포 시 프록시 서버를 직접 구축해야 할 듯

 

2. Cloudflare worker

• 서버리스 컴퓨팅 플랫폼으로, CDN (Content Delivery Network)을 기반으로 한 서버리스 함수 기능을 제공
• worker를 생성한 뒤 서버단 코드를 작성하고 배포하면 끗!
  
• 리액트에서는 해당 worker url로 데이터를 fetch하면 CORS 에러 없이 정상적으로 동작한다.

참고자료)

https://bartsolutions.github.io/2021/10/21/cloud-flare-cors-worker-setup/

Set up CORS header for Cloudflare proxied websites