CORS 완전 정복 — 동일 출처 정책과 교차 출처 요청의 원리

✅ 같은 출처
https://example.com/page1
https://example.com/page2/detail

❌ 다른 출처
https://example.com   vs   http://example.com      ← 프로토콜 다름
https://example.com   vs   https://api.example.com  ← 호스트 다름
https://example.com   vs   https://example.com:8080 ← 포트 다름

1. 사용자가 bank.com에 로그인한 상태 (세션 쿠키 보유)
2. 악성 사이트 evil.com 방문
3. evil.com의 스크립트가 bank.com/transfer?to=hacker&amount=1000000 호출
4. 쿠키가 자동 전송되어 → 실제로 송금이 실행됨

1. 사용자가 mail.com에 로그인한 상태
2. evil.com의 스크립트가 mail.com/inbox를 fetch로 호출
3. 응답에서 메일 내용을 읽어서 → 공격자 서버로 전송

브라우저: "이 요청은 다른 출처에서 왔는데, 허용해도 되나요?"
서버:    "네, 이 출처는 괜찮습니다." (응답 헤더로 알려줌)
브라우저: "서버가 허용했으니 응답을 스크립트에 전달합니다."

클라이언트                              서버
    |                                    |
    |--- GET /api/data ----------------→|
    |    Origin: https://frontend.com    |
    |                                    |
    |←-- 200 OK ----------------------- |
    |    Access-Control-Allow-Origin:    |
    |    https://frontend.com            |

// 단순 요청 예시 — Preflight 없이 바로 전송
fetch('https://api.example.com/data')
  .then(res => res.json())
  .then(data => console.log(data));

클라이언트                                   서버
    |                                         |
    |--- OPTIONS /api/users ----------------→ |  ← 사전 점검(Preflight)
    |    Origin: https://frontend.com         |
    |    Access-Control-Request-Method: POST  |
    |    Access-Control-Request-Headers:       |
    |      Content-Type, Authorization        |
    |                                         |
    |←-- 204 No Content -------------------- |  ← 서버가 허용 여부 응답
    |    Access-Control-Allow-Origin:          |
    |      https://frontend.com               |
    |    Access-Control-Allow-Methods:         |
    |      GET, POST, PUT, DELETE             |
    |    Access-Control-Allow-Headers:         |
    |      Content-Type, Authorization        |
    |    Access-Control-Max-Age: 86400        |
    |                                         |
    |--- POST /api/users ------------------→ |  ← 실제 요청
    |    Origin: https://frontend.com         |
    |    Content-Type: application/json        |
    |    Authorization: Bearer xxx            |
    |                                         |
    |←-- 201 Created ----------------------- |  ← 실제 응답
    |    Access-Control-Allow-Origin:          |
    |      https://frontend.com               |

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("https://frontend.com") // 허용할 출처
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 허용 메서드
                .allowedHeaders("Content-Type", "Authorization") // 허용 헤더
                .allowCredentials(true) // 인증 정보 허용
                .maxAge(86400); // Preflight 캐시 24시간
    }
}

const cors = require('cors');

app.use(cors({
  origin: 'https://frontend.com', // 허용할 출처
  methods: ['GET', 'POST', 'PUT', 'DELETE'], // 허용 메서드
  allowedHeaders: ['Content-Type', 'Authorization'], // 허용 헤더
  credentials: true, // 인증 정보 허용
  maxAge: 86400 // Preflight 캐시 24시간
}));

// fetch API — credentials 옵션 사용
fetch('https://api.example.com/user', {
  method: 'GET',
  credentials: 'include' // 쿠키를 함께 전송
});

// XMLHttpRequest — withCredentials 사용
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/user');
xhr.withCredentials = true; // 쿠키를 함께 전송
xhr.send();

// axios — withCredentials 사용
axios.get('https://api.example.com/user', {
  withCredentials: true // 쿠키를 함께 전송
});

❌ 와일드카드 불가 — 정확한 출처 명시 필수
Access-Control-Allow-Origin: *                    ← 거부됨!
Access-Control-Allow-Origin: https://frontend.com ← 허용

❌ 메서드/헤더에도 와일드카드 불가 (일부 브라우저)
Access-Control-Allow-Methods: *    ← 거부될 수 있음
Access-Control-Allow-Methods: GET, POST ← 명시

✅ Credentials 헤더 필수
Access-Control-Allow-Credentials: true

// Node.js Express — 미들웨어로 직접 설정
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://frontend.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  // Preflight 요청(OPTIONS)에 대한 빠른 응답
  if (req.method === 'OPTIONS') {
    return res.sendStatus(204);
  }
  next();
});

기존 (CORS 에러 발생):
브라우저 → 외부 API 서버  (교차 출처 → 차단)

프록시 사용 (CORS 회피):
브라우저 → 내 서버(같은 출처) → 외부 API 서버  (서버 간 통신 → 차단 없음)

// Vite — vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 백엔드 서버 주소
        changeOrigin: true, // Origin 헤더를 target으로 변경
        rewrite: (path) => path.replace(/^\/api/, '') // 경로 재작성
      }
    }
  }
});

// Webpack — webpack.config.js (CRA의 경우 setupProxy.js)
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
};

// Next.js — next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*', // 프론트 경로
        destination: 'http://localhost:8080/:path*' // 백엔드 서버
      }
    ];
  }
};

// 클라이언트
fetch('https://api.example.com/user', {
  credentials: 'include'
});

// 서버 — 이렇게 하면 에러 발생!
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Credentials', 'true');

// 여러 출처를 허용해야 할 때 — 동적으로 설정
const allowedOrigins = ['https://frontend.com', 'https://admin.com'];

app.use((req, res, next) => {
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.header('Access-Control-Allow-Origin', origin);
  }
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
});

// Content-Type을 지정하지 않으면 기본값이 text/plain
// JSON을 보내면서 Content-Type을 빠뜨리면 서버가 파싱 실패
fetch('https://api.example.com/users', {
  method: 'POST',
  body: JSON.stringify({ name: '홍길동' })
  // Content-Type 누락! → 서버에서 JSON으로 파싱 못 함
});

// 올바른 요청
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // 이 헤더 때문에 Preflight 발생
  },
  body: JSON.stringify({ name: '홍길동' })
});

// Express — POST 라우트만 정의하면 OPTIONS 요청에 404 반환
app.post('/api/users', (req, res) => {
  // ... 사용자 생성 로직
});

// cors 미들웨어를 사용하면 자동 처리
// 또는 직접 OPTIONS 핸들링
app.options('/api/users', (req, res) => {
  res.header('Access-Control-Allow-Origin', 'https://frontend.com');
  res.header('Access-Control-Allow-Methods', 'POST');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.sendStatus(204);
});

// no-cors는 CORS 에러를 없애주는 게 아닙니다!
fetch('https://api.example.com/data', {
  mode: 'no-cors' // 에러는 안 나지만...
});
// 응답 타입이 'opaque'가 되어 → 응답 본문을 읽을 수 없음
// 즉, 데이터를 가져오는 용도로는 쓸 수 없습니다