[Spring] Access-Control-Allow-Origin header is present 해결방법

"Access-Control-Allow-Origin" 헤더가 브라우저에서 발생하는 보안 정책 중 하나입니다.

이 헤더는 웹 페이지가 다른 도메인에서 리소스를 요청할 때 CORS(Cross-Origin Resource Sharing) 정책을 적용하도록 브라우저에 지시합니다.

 

로컬 테스트 서버에서 이 에러가 발생한다면, 보통은 서버 측에서 CORS를 허용하지 않아서 발생합니다.

해결하기 위해서는 서버에서 CORS 정책을 설정해야 합니다. Spring Boot에서는 아래와 같은 방법들로 해결할 수 있습니다.

 

Spring Boot에서 CORS를 허용하려면 다음과 같이 설정할 수 있습니다.

1. application.yml 설정
2. @CrossOrigin 애노테이션 사용

 

 

1. application 설정

 

예를 들어, 모든 요청에 대해 CORS를 허용하려면 Spring Boot의 설정 파일인 application.properties 또는 application.yml에 다음과 같이 추가합니다:

application.properties:

spring.mvc.cors.allowed-origins=*

application.yml:

spring:
  mvc:
    cors:
      allowed-origins: "*"

위 설정은 모든 요청에 대해 모든 Origin을 허용합니다. 실제 환경에서는 보안 상의 이유로 '*'를 사용하는 것보다는 특정 Origin을 명시하는 것이 좋습니다.

 

 

2. @CrossOrigin 애노테이션을 사용

가장 간단한 방법은 @CrossOrigin 애노테이션을 사용하는 것입니다. 이를 이용하면 특정 컨트롤러나 메소드에 대해 CORS 정책을 설정할 수 있습니다.

또는 특정 컨트롤러나 메소드에 대해 CORS를 허용하려면 다음과 같이 @CrossOrigin 애노테이션을 사용합니다:

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class PostController {

    @CrossOrigin(origins = "<http://localhost:3000>") // 허용할 Origin을 명시
    @GetMapping("/api/posts")
    public List<Post> getPosts() {
        // 게시물을 반환하는 로직
    }
}

위의 예제에서는 /api/posts 엔드포인트에 대해 localhost:3000 Origin에서의 요청을 허용합니다. 이렇게 하면 해당 Origin에서의 요청은 CORS 에러가 발생하지 않습니다.

 

실제 프로덕션 환경에서는 보안을 고려하여 필요한 Origin만 허용하도록 설정하는 것이 좋습니다.