CORS 에러는 프론트가 해결해야하는가? (어떤 트윗을 보고)

0. CORS 에러는 프론트에서 해결이 가능하다고?

우연히 어떤 트윗을 봤다.

(출처: https://x.com/robinyoondev/status/1891720787863687634)

CORS 에러는 서버 측에서 Access-Control-Allow-Origin 헤더를 설정하면, 특정 출처에서의 접근을 허용함으로써 해결할 수 있다.

(CORS에 대해 알고 싶다면 아래 링크에서 잘 설명되어 있다!

 

링크: https://www.maeil-mail.kr/question/78 )

그런데 위 트윗에서는, 백엔드 개발자분께서 CORS 에러를 프론트엔드에서 해결할 수 있다고 말했다고 한다. 프론트엔드에서 어떻게 CORS 에러를 해결할 수 있을까?

다음과 같은 트윗들이 달려있었는데, 이해가 가지 않는 단어들이 있어서 검색을 해보았다.

1. BFF란 무엇일까?

BFF(Backend For Frontend): 프론트엔드를 위한 백엔드 서버 → 프론트엔드를 요구사항에 맞게 구현하기 위한 도움을 주는 보조 서버

(자세한 설명은 링크를 참고하자. 링크: https://velog.io/@seeh_h/BFF란)

 

결국 따로 서버를 파서 CORS를 피하라는건데 해당 개발자는 React + Vite여서 서버 기능이 없어 BFF를 구현하지 못했다고 한다.

---

2. vite 프록시 설정 변경으로 프로덕션에서 CORS를 회피할 수 있는가?

→ CORS 회피를 위한 Vite의 프록시 설정은 개발 환경에서만 동작하고 프로덕션 환경에서는 작동하지 않는다고 한다.

이유

• Vite의 프록시 설정은 개발 서버(vite dev)에서만 작동
• 프로덕션 빌드(vite build) 후에는 정적 파일들만 생성되므로 프록시 기능이 없어짐

---

3. Nginx 같은 웹 서버에서 /api를 API 서버로 가게끔 proxy pass를 한다

프론트엔드와 백엔드가 서로 다른 도메인이라 CORS가 발생했던거라, 둘 사이에 Nginx proxy pass 설정을 해서 CORS를 회피할 수 있다고 한다.

 

예시를 든다면 다음과 같다.

만약 요청이 https://your-domain.com/api/users라면,

1. 클라이언트가 웹사이트에서 /api/users를 요청
2. Nginx 서버가 이 요청을 받음
3. Nginx는 /api로 시작하는 요청이라는 것을 확인
4. Nginx는 /api를 제거하고 백엔드 서버(http://backend-server:8080/users)로 요청을 전달
5. 백엔드 서버가 처리 후 결과를 보냄
6. Nginx는 받은 결과를 클라이언트에게 전달

Nginx를 사용해서 CORS를 우회할 수는 있겠지만, 그냥 백엔드에서 설정하는 것이 서로에게 훨씬 편하지 않을까라는 생각이 들었다.

---

그리고 작성자가 새로운 트윗을 올렸다는 것을 확인했다.

4. AWS 람다로도 CORS를 회피할 수 있다고?

Nginx의 proxy pass와 비슷한 방식이다.

(AWS 람다가 무엇인지 궁금하다면 링크를 참고하자. 링크: https://velog.io/@xgro/AWS-Lambda )

 

다음과 같은 방식으로 CORS를 회피할 수 있다고 한다.

1. 프론트엔드에서 AWS Lambda 함수의 API Gateway 엔드포인트로 요청
2. Lambda 함수가 실제 백엔드 API를 호출
3. Lambda가 응답을 받아서 클라이언트에게 전달

 

그런데 프론트엔드가 AWS 람다를 사용한다는 것은 들어본 적이 없는데, AWS 람다를 활용하라고 했다고?

 

트윗을 자세히 보니 다음과 같은 문답이 있었다.

Q. AWS 람다는 프론트엔드 영역이 아니지 않나?
A. 자신도 백엔드만 하고 있는 게 아니다.

 

 

아하! 프론트엔드에서 AWS 람다를 활용하는 것은 아니었다. 내가 만약 저 답변을 들었다면 머리가 새하얘졌을 것 같다.

 

Nginx는 웹 ‘서버’이므로 프론트엔드가 아니라 백엔드의 영역이라고 생각한다. (물론 알아놓으면 많이 도움이 될 것 같다.) 작성된 트윗을 더 읽어보니 해피엔딩으로 끝난 것은 아닌 것 같아서 조금 찝찝했다.

---

사실 예전에 프로젝트 개발을 진행할 때 CORS 문제가 발생해서 Proxy로 CORS를 우회했던 경험이 있다.

하지만 Proxy는 결국 개발 단계에서만 적용 가능하므로 프로덕션 단계에서 CORS를 해결하려면 백엔드가 해결해줘야 한다고 생각한다.

결국, 위 트윗에서 CORS 에러는 백엔드 개발자분께서 해결해주시는 게 더 낫지 않았을까 하는 생각이 든다.