CORS (Cross-Origin Resource Sharing)

서버간 요청의 보안을 강화하기 위해 도입된 정책. 브라우저는 보안상의 이유로 다른 출처에서 리소스를 요청할 때 제한을 둔다. 이런 제한을 우회하거나 적절히 설정하는 방식이 바로 CORS.

---

CORS의 기본 개념

 

1. Origin (출처)

웹 애플리케이션의 출처는 프로토콜, 도메인, 포트 번호로 구성됨.

예:

• http://example.com:8080

• https://api.example.com

같은 출처는 이 3가지가 모두 동일할 때를 의미함.

2. Cross-Origin Request (교차 출처 요청)

클라이언트(보통 브라우저)에서 다른 출처의 리소스를 요청할 때 발생하는 요청.

예:

• 프론트엔드: http://localhost:3000

• 백엔드 API: http://localhost:8080

이 경우 다른 출처로 간주되어 CORS 규칙이 적용됨.

3. 브라우저의 기본 동작

• 브라우저는 교차 출처 요청이 발생하면 요청이 허용되었는지 확인하기 위해 CORS 정책을 확인함.

• 서버가 올바르게 CORS 헤더를 포함하지 않으면 요청이 차단됨.

---

CORS 에러

에러 메시지 예시

Access to fetch at 'http://localhost:8080/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

발생 조건

1. 클라이언트와 서버가 서로 다른 출처에 위치함.

2. 서버가 요청에 대해 적절한 CORS 헤더를 설정하지 않음.

3. 브라우저가 서버의 응답을 신뢰하지 않아 요청을 차단함.

---

CORS 처리 방식

 

1. 서버에서 CORS 설정

백엔드에서 올바른 CORS 헤더를 설정하면 해결 가능함. 주로 사용하는 헤더는 다음과 같음:

 

필수 헤더

• Access-Control-Allow-Origin
  • 허용할 클라이언트 출처를 지정.
  • *로 설정하면 모든 출처 허용.
  • 예:

Access-Control-Allow-Origin: http://localhost:3000

 

• Access-Control-Allow-Methods
  • 허용할 HTTP 메서드(GET, POST, PUT, DELETE 등)를 지정.
  • 예:

Access-Control-Allow-Methods: GET, POST, PUT, DELETE

 

• Access-Control-Allow-Headers
  • 클라이언트 요청에서 사용할 수 있는 헤더를 지정.
  • 예:

Access-Control-Allow-Headers: Content-Type, Authorization

 

• Access-Control-Allow-Credentials
  • 클라이언트에서 쿠키 또는 인증 정보를 요청에 포함할 수 있도록 허용.
  • • 예:

Access-Control-Allow-Credentials: true

2. Spring Boot에서의 CORS 설정

 

Spring Boot에서는 다음과 같은 방법으로 CORS를 설정할 수 있음.

 

방법 1: 컨트롤러 수준에서 설정

@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class MyController {
    @GetMapping("/api/data")
    public String getData() {
        return "Hello World";
    }
}

 

방법 2: 글로벌 CORS 설정 (전체 API에 적용)

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 모든 경로 허용
                .allowedOrigins("http://localhost:3000") // 허용할 출처
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 허용할 HTTP 메서드
                .allowedHeaders("*") // 모든 헤더 허용
                .allowCredentials(true); // 인증 정보 허용
    }
}

3. 프록시 설정

CORS를 피하기 위해 클라이언트(React, Angular 등)에서 프록시를 설정할 수도 있음.

 

React의 경우

 

package.json 파일에 프록시 설정을 추가:

"proxy": "http://localhost:8080"

• 클라이언트에서 http://localhost:3000/api/data 요청 시, 자동으로 http://localhost:8080/api/data로 전달됨.

---

요약

• CORS란? 브라우저가 교차 출처 요청을 제한하는 보안 정책.
• CORS 에러 해결 방법:
  1. 백엔드에서 CORS 헤더 설정 (Access-Control-Allow-Origin 등).
  2. Spring Boot에서 글로벌 CORS 설정 추가.
  3. 클라이언트에서 프록시를 사용해 같은 출처처럼 요청 보내기.
• 프론트엔드와 백엔드 서버가 다른 출처에 위치하는 경우, 적절한 CORS 설정이 필수적임.

 

 

 

 

출처 : ChatGPT