CORS

CORS (Cross-Origin Resource Sharing)란?

CORS (교차 출처 리소스 공유, Cross-Origin Resource Sharing)는 브라우저 보안 정책(Same-Origin Policy, SOP)으로 인해 다른 출처(Origin)에서 온 요청을 제한하는 문제를 해결하기 위한 메커니즘입니다.

1. Same-Origin Policy (SOP)

웹 브라우저는 보안상의 이유로 다른 출처에서 온 리소스를 기본적으로 차단합니다.
여기서 출처(Origin)란 아래 세 가지 요소로 결정됩니다.

• 프로토콜 (Protocol) → http:// vs https://
• 도메인 (Domain) → example.com vs api.example.com
• 포트 (Port) → :80, :443, :3000 등

예를 들어, https://example.com에서 실행 중인 웹 애플리케이션이 https://api.example.com에 데이터를 요청하면 SOP 정책에 의해 차단됩니다.

2. CORS 해결 방식

CORS는 서버가 특정 출처에서 온 요청을 허용할 수 있도록 HTTP 헤더를 이용해 접근 권한을 부여하는 방법입니다.

① Preflight 요청 (OPTIONS 메서드)

브라우저는 보안이 중요한 요청(예: PUT, DELETE, Content-Type: application/json 포함 요청 등)에 대해 실제 요청 전에 OPTIONS 메서드를 사용한 사전 요청(Preflight Request)을 보냅니다.

• 요청 예시:

  OPTIONS /data HTTP/1.1
  Origin: https://example.com
  Access-Control-Request-Method: POST
  Access-Control-Request-Headers: Content-Type

• 서버 응답 예시:

  HTTP/1.1 200 OK
  Access-Control-Allow-Origin: https://example.com
  Access-Control-Allow-Methods: GET, POST, PUT, DELETE
  Access-Control-Allow-Headers: Content-Type

② Access-Control-Allow-Origin 헤더

서버가 CORS를 허용하면 응답 헤더에 Access-Control-Allow-Origin 값을 추가해야 합니다.

• 단일 출처 허용

  Access-Control-Allow-Origin: https://example.com

• 모든 출처 허용 (보안 취약)

  Access-Control-Allow-Origin: *

③ Access-Control-Allow-Credentials 헤더

쿠키나 인증 정보를 포함한 요청을 허용하려면 credentials: true 설정이 필요하며, Access-Control-Allow-Origin을 특정 도메인으로 지정해야 합니다.

• 요청 예시 (JavaScript):

  fetch("https://api.example.com/data", {
    method: "GET",
    credentials: "include" // 쿠키 전송 허용
  });

• 서버 응답 예시:

  Access-Control-Allow-Origin: https://example.com
  Access-Control-Allow-Credentials: true

3. Spring Boot에서 CORS 설정

① @CrossOrigin 어노테이션 사용 (컨트롤러 레벨)

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "https://example.com")
public class SampleController {
    @GetMapping("/data")
    public String getData() {
        return "Hello, CORS!";
    }
}

② 전역 CORS 설정 (Spring Security 사용 시)

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("https://example.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

③ Spring Security에서 CORS 허용

Spring Security를 사용하면 기본적으로 모든 CORS 요청이 차단됩니다. 이를 허용하려면 다음 설정을 추가해야 합니다.

@Configuration
@EnableWebSecurity
public class SecurityConfig {
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .cors(withDefaults()) // CORS 설정 활성화
            .csrf(AbstractHttpConfigurer::disable) // CSRF 비활성화
            .authorizeHttpRequests(auth -> auth.anyRequest().permitAll());
        return http.build();
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(List.of("https://example.com"));
        configuration.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE"));
        configuration.setAllowedHeaders(List.of("*"));
        configuration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

4. Next.js에서 CORS 설정

Next.js에서 백엔드 API 호출 시 CORS 문제가 발생할 수 있습니다. 이를 해결하려면 Next.js API Route에서 CORS를 허용해야 합니다.

import type { NextApiRequest, NextApiResponse } from 'next';
import Cors from 'cors';

const cors = Cors({
  origin: 'https://example.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true,
});

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  res.status(200).json({ message: 'CORS 설정 완료' });
}

5. CORS 오류 해결 방법

• Access-Control-Allow-Origin 설정 확인
• Spring Security 사용 시 cors() 설정 추가
• 쿠키 사용 시 credentials: true + Access-Control-Allow-Credentials: true 적용
• Preflight 요청이 허용되도록 OPTIONS 요청 처리

6. 결론

• CORS는 보안상의 이유로 다른 출처에서 온 요청을 제한하는 정책이지만, Access-Control-Allow-Origin 등의 설정을 통해 허용할 수 있음.
• Spring Boot + Next.js 환경에서 CORS를 설정하는 방법을 이해하고, 필요한 경우 Spring Security 및 API Routes에서 추가 설정이 필요함.