[WEB] CORS가 뜨면 proxy로 해결하세요!

CORS

CORS는 Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유를 말한다.

---

 

 

날 너무나도 힘들게 하고 괴롭혔던 CORS

CORS가 무엇인지에 대해서는 이전 포스팅에서 이미 다루었으므로 SKIP!!

 

오늘은 CORS를 proxy로 해결해보자.

 

 

 

proxy로 CORS 해결하기

배포 : netlify

 

WEB 배포를 netlify로 했는데 배포 후 서버에서 데이터를 불러오려고 시도하면 계속해서 CORS 오류가 발생했다. CORS가 무엇인지는 알고 그에 대한 해결법도 알고 있었지만 막상 직접 경험하니 머리가 새하얘졌다. 이전 프로젝트에서도 CORS를 만났는데 서버에서 받아오는 데이터를 그냥 저장하여 불러오는 식으로 해결했었는데 이번에는 정말 해결하고 싶었다.

 

 

보기도싫은 CORS

 

 

 

나는 배포를 netlify로 했는데 해결법은 다음과 같다.

netlify에서 지원하는 proxy를 이용하는 것이다.

 

그렇다면 netlify에서 지원하는 proxy를 어떻게 이용할까?

 

 

1. netlify.toml 파일 생성
2. redirects 설정

다음 2개만 설정하면 proxy를 사용하여 CORS 문제를 피할 수 있다 😭😭

 

 

 

1️⃣ netlify.toml 파일 생성

package와 같은 폴더(root)에 netlify.toml이라는 파일을 생성!!

 

 

2️⃣ redirects 설정

생성한 파일 netlify.toml에 redirect를 설정해준다.

 

[[redirects]]
  from = "/proxy/*"
  to = "https://퉁일이의사이트/:splat"
  status = 200
  force = true

위와 같이 내용을 채우면 된다.

 

그러면 해결

원리는 다음과 같다.

 

netlify에서 서버에서 요청을 받아올 때, 앞에 proxy를 붙여주고 그것이 값을 변환해주어 CORS 문제를 해결시켜주는 것이다. 우리가 별달리 proxy를 구현하지 않아도 netlify에서 구현이 되어 있어 도움을 받으면 된다.

 

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!