CORS우회 (우회 프록시 사용)

https://cors-anywhere.herokuapp.com/는 CORS(Cross-Origin Resource Sharing) 우회 프록시 역할을 하는 서비스입니다. 이 서비스는 서버가 CORS 정책을 지원하지 않는 경우, 클라이언트가 이를 우회하여 데이터를 가져올 수 있도록 도와줍니다. 동작 원리는 다음과 같습니다.

Table of Contents

Toggle

🔹 CORS 기본 원리

CORS 제한: 브라우저는 보안상의 이유로, 자바스크립트 코드가 현재 도메인(origin)과 다른 도메인에서 API 요청을 보낼 경우, 서버가 명시적으로 허용하지 않으면 차단합니다.
CORS 헤더: 서버가 응답 시 Access-Control-Allow-Origin 헤더를 포함하면 브라우저가 요청을 허용합니다.

🔹 CORS Anywhere 동작 원리

클라이언트(브라우저) → CORS Anywhere 서버로 요청을 보냄
- 예제:bash복사편집curl https://cors-anywhere.herokuapp.com/https://example.com/data
CORS Anywhere 프록시 서버가 요청을 받은 후, 원래의 대상 서버(https://example.com/data)로 다시 요청을 보냄.
대상 서버가 응답을 반환하면, CORS Anywhere 서버가 응답을 수정하여 CORS 관련 헤더를 추가함:http복사편집Access-Control-Allow-Origin: *
최종적으로 클라이언트는 정상적으로 데이터를 받을 수 있음.

🔹 CORS Anywhere가 하는 역할

서버가 원래 CORS 헤더를 제공하지 않아도, 프록시 서버가 이를 추가하여 브라우저가 데이터를 수신할 수 있도록 함.
클라이언트 측에서 직접 서버를 변경할 수 없을 때 유용함.
API 테스트, 개발 환경 등에서 활용 가능.

🔹 보안 문제

공개된 프록시 사용 시 위험
- 악의적인 사용자가 요청을 조작하여 공격 가능 (예: API 키 유출).
- 개인정보가 유출될 가능성이 있음.
속도 및 신뢰성 문제
- 프록시를 거치므로 네트워크 속도가 느려질 수 있음.
- herokuapp.com에서 제공하는 무료 버전은 사용량 제한이 있음.
프록시 서버 자체 차단 가능성
- 많은 API 제공업체가 CORS Anywhere와 같은 프록시 서버에서 오는 요청을 차단하는 경우가 많음.

🔹 대안 방법

서버에서 직접 CORS 헤더 설정
- 웹 서버(Nginx, Apache) 또는 API 서버에서 Access-Control-Allow-Origin을 설정.
프론트엔드와 백엔드 간 프록시 설정
- 개발 환경에서 로컬 프록시를 설정하여 요청을 우회 (webpack devServer.proxy 등).
Cloudflare Workers, AWS Lambda@Edge 활용
- 자체적인 CORS 프록시 서버를 운영하여 보안성을 강화.

🔹 결론

CORS Anywhere는 간단한 API 테스트와 개발 용도로는 유용하지만, 보안상 취약점이 있으므로 운영 환경에서는 직접 CORS 설정을 하는 것이 가장 안전한 방법입니다. 🚀

아니요, 클라이언트 측에서 HTTP 요청에 CORS 관련 헤더를 추가한다고 해서 해결되지 않습니다. CORS는 서버에서 허용해야만 적용되며, 클라이언트에서 임의로 추가하는 것만으로는 우회할 수 없습니다.

🔹 클라이언트에서 헤더 추가하면 안되나?

클라이언트에만 추가하면 안됩니다.

CORS 정책은 브라우저가 강제하는 보안 정책
- 브라우저는 서버가 Access-Control-Allow-Origin을 설정하지 않으면 요청을 차단함.
- 즉, 클라이언트에서 Access-Control-Allow-Origin: *을 추가한다고 해도 브라우저가 이를 무시하고 요청을 차단함.
CORS 헤더는 서버 응답에 포함되어야 함
- CORS 정책은 요청이 아니라 응답에서 헤더를 확인하기 때문에, 요청을 보낼 때 클라이언트가 Access-Control-Allow-Origin을 추가해도 효과가 없음.
브라우저가 Preflight 요청(OPTIONS)을 보냄
- 특정 요청(POST, PUT, DELETE, PATCH, 특정 헤더 포함된 GET)은 먼저 **”Preflight 요청(OPTIONS)”**을 보내서 서버가 CORS를 허용하는지 확인함.
- 만약 서버가 Access-Control-Allow-Origin을 설정하지 않으면, 브라우저는 본 요청을 보내지 않음.

🔹 가능한 해결 방법

✅ 1. 서버에서 CORS 설정을 허용하는 방법 (추천)

서버 측에서 Access-Control-Allow-Origin을 설정하는 것이 가장 확실한 방법입니다.

📌 Nginx 예제:

server {
    location /api/ {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
        
        if ($request_method = OPTIONS) {
            return 204;
        }
    }
}

📌 Express.js (Node.js) 예제:

const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors()); // 모든 도메인 허용

app.get('/data', (req, res) => {
  res.json({ message: 'Hello, world!' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

✅ 2. 클라이언트에서 백엔드 프록시를 사용 (서버에서 요청 대신 처리)

클라이언트가 직접 다른 도메인으로 요청을 보내는 것이 아니라, 같은 도메인의 프록시 서버에 요청을 보낸 후, 프록시 서버가 원본 서버로 요청을 보내도록 처리하는 방법입니다.

📌 예제:

클라이언트는 동일한 도메인에 요청을 보내고, 프록시 서버가 API 요청을 대신 수행:

fetch('/proxy?url=https://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

서버 측(Node.js)에서 프록시 구현:

const express = require('express');
const axios = require('axios');

const app = express();

app.get('/proxy', async (req, res) => {
  const { url } = req.query;
  try {
    const response = await axios.get(url);
    res.setHeader('Access-Control-Allow-Origin', '*'); // CORS 허용
    res.json(response.data);
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch data' });
  }
});

app.listen(3001, () => console.log('Proxy running on port 3001'));

이렇게 하면, 클라이언트는 같은 도메인(/proxy)에 요청을 보내므로 CORS 문제가 발생하지 않음.

✅ 3. 브라우저 확장 프로그램 이용

개발 환경에서만 사용할 경우, “CORS Unblock” 같은 크롬 확장 프로그램을 사용하여 브라우저에서 CORS 제한을 해제할 수도 있음.
하지만, 이 방법은 보안에 취약하여 운영 환경에서는 사용하지 않는 것이 좋음.

🔹 결론

🚫 클라이언트에서 HTTP 요청 헤더를 추가한다고 해서 CORS 문제를 해결할 수는 없음.
✅ 서버 측에서 CORS를 허용하거나, 백엔드 프록시를 사용하여 요청을 처리하는 것이 가장 좋은 방법.
✅ 개발 중이라면 브라우저 확장 프로그램을 임시로 활용할 수도 있음.

zerg96