CORS 설정 없이 SOP를 우회하여 외부 서버와 통신할 수 있는 방법이 있을까요?

SOP가 뭐길래? 🤔

SOP(Same-Origin Policy)는 브라우저의 보안 정책이에요! 다른 도메인끼리 함부로 통신하지 못하게 막는 경비원 같은 역할을 해요 🛡️

예를 들어

• 내 사이트: mysite.com
• 외부 API: api.weather.com

이 둘이 직접 통신하려고 하면? "안 돼!" 라고 브라우저가 막아버려요 ❌

CORS 설정의 한계 😅

보통은 CORS 헤더를 서버에서 설정해서 해결하죠:

Access-Control-Allow-Origin: *

하지만 외부 API 서버를 내가 직접 관리하지 않는다면? 설정할 수 없어요! 😱

 

프록시 서버: 똑똑한 중간다리 🌉

작동 원리

마치 심부름센터같은 개념이에요!

1. 브라우저: "야, 날씨 API 데이터 좀 가져와!"
2. 프록시 서버: "알겠어, 내가 대신 가져올게!" 🏃‍♂️
3. 프록시 서버 → 외부 API: 요청 전송
4. 외부 API → 프록시 서버: 응답 전송
5. 프록시 서버 → 브라우저: "여기 데이터야!" ✅

 

왜 이게 가능할까? 🤓

핵심은 서버 간 통신에는 SOP가 적용되지 않는다는 점이에요!

• 브라우저 ↔ 다른 도메인: 막힘 🚫
• 서버 ↔ 다른 도메인: 자유로움 🕊️

실생활 비유: 대리구매 서비스 🛒

해외 쇼핑몰에서 직접 구매가 안 될 때, 대리구매 업체를 이용하는 것과 똑같아요!

1. 나: "이 상품 사고 싶어!"
2. 대리구매 업체: "알겠습니다, 대신 사드릴게요!"
3. 대리구매 업체: 해외 쇼핑몰에서 구매
4. 대리구매 업체: "여기 상품이에요!" 📦

 

Next.js에서 쉽게 구현하기 💻

Next.js의 API Routes를 활용하면 자동으로 프록시 역할을 해줘요!

// pages/api/weather.js 또는 app/api/weather/route.js
export default async function handler(req, res) {
  const response = await fetch('https://api.weather.com/data');
  const data = await response.json();
  res.json(data);
}

이제 프론트엔드에서는

// 같은 도메인이니까 CORS 문제 없음! 🎉
fetch('/api/weather')

다른 우회 방법들도 있어요! 🔧

1. JSONP (구식이지만 가끔 유용) 📜

• <script> 태그는 CORS 제한이 없다는 점을 활용
• 콜백 함수로 데이터 받기

2. 브라우저 확장 프로그램 🔌

• CORS 체크를 비활성화하는 확장 프로그램
• 개발 환경에서만 사용 권장

3. 서버리스 함수 ⚡

• Vercel, Netlify 등의 서버리스 함수 활용
• 프록시 역할 수행

주의사항 ⚠️

보안 고려사항

• 무분별한 프록시는 보안 위험 초래 가능
• API 키 노출 방지 필요
• Rate Limiting 고려

성능 고려사항

• 추가 지연시간 발생 ⏰
• 서버 부하 증가 📈
• 캐싱 전략 필요

실무에서의 활용 💼

• 개발 환경: Create React App의 proxy 설정
• 프로덕션: Next.js API Routes, Express 미들웨어
• 마이크로서비스: API Gateway 패턴

---

면접 답변 💼

"SOP는 브라우저 간 통신에만 적용되므로, 프록시 서버를 중간에 두어 우회할 수 있습니다. 클라이언트가 같은 origin의 프록시 서버에 요청하고, 프록시 서버가 대신 외부 API를 호출해서 응답을 전달하는 방식입니다. Next.js의 API Routes나 Express 미들웨어를 활용해 쉽게 구현 가능하며, 서버 간 통신에는 CORS 제한이 없다는 점이 핵심입니다."

 

---

CORS 설정 없이 SOP를 우회하여 외부 서버와 통신할 수 있는 방법이 있을까요?

프론트엔드와 관련된 질문이에요.

프록시 서버를 이용한다면 CORS 설정 없이도 SOP를 우회할 수 있습니다. 여기서 이야기하는 프록시 서버는 브라우저 대신 외부 서버에 요청을 보내고 응답을 받는 역할을 대리 수행하는 서버입니다. 브라우저 측에서 직접 외부 서버에 요청을 보내지 않고, 클라이언트와 동일한 origin의 프록시 서버를 통해 요청을 보내면 SOP의 제한을 피할 수 있습니다.

예를 들어, 클라이언트 측 도메인이 client.com이고, 서버 측 도메인이 server.com라고 가정하겠습니다. 이때 CORS 설정을 별도로 하지 않았다면, 도메인이 다르므로 브라우저 단에서 SOP에 의해 통신이 차단됩니다. 그런데 이때 만약 브라우저가 아닌 클라이언트 서버를 통해 server.com에 요청을 보낸다면 응답을 받을 수 있게 됩니다. 서버와 서버 간의 통신에는 SOP가 적용되지 않기 때문입니다.

이후, 클라이언트 서버는 client.com/api/xxx와 같은 경로로 server.com으로부터 받은 응답을 브라우저(클라이언트)에 반환합니다. 이렇게 하면 클라이언트 측 origin과 서버 측 origin이 client.com으로 일치하기 때문에 정상적으로 응답을 수신할 수 있게 됩니다.