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

by

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

🔹 CORS 기본 원리

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

🔹 CORS Anywhere 동작 원리

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

🔹 CORS Anywhere가 하는 역할

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

🔹 보안 문제

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

🔹 대안 방법

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

🔹 결론

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

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

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

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

  1. CORS 정책은 브라우저가 강제하는 보안 정책
    • 브라우저는 서버가 Access-Control-Allow-Origin을 설정하지 않으면 요청을 차단함.
    • 즉, 클라이언트에서 Access-Control-Allow-Origin: *을 추가한다고 해도 브라우저가 이를 무시하고 요청을 차단함.
  2. CORS 헤더는 서버 응답에 포함되어야 함
    • CORS 정책은 요청이 아니라 응답에서 헤더를 확인하기 때문에, 요청을 보낼 때 클라이언트가 Access-Control-Allow-Origin을 추가해도 효과가 없음.
  3. 브라우저가 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를 허용하거나, 백엔드 프록시를 사용하여 요청을 처리하는 것이 가장 좋은 방법.
✅ 개발 중이라면 브라우저 확장 프로그램을 임시로 활용할 수도 있음.

Leave a Comment