[Vue/Spring boot]CORS 에러: 원인과 해결 방법

CORS는 브라우저가 보안 때문에 다른 도메인(출처) 간 리소스 요청을 제한하는 정책이야. 서버에서 CORS 설정 제대로 안 하면 브라우저가 요청 막아서 "CORS 에러"가 뜨지. 이 글에선 CORS 에러 원인과 해결 방법을 정리

CORS 에러의 원인

1. Access-Control-Allow-Origin 헤더 누락이나 설정 오류
   • 서버가 Access-Control-Allow-Origin 헤더를 응답에 포함 안 하거나 잘못 설정하면 발생함.
2. 프리플라이트(OPTIONS) 요청 설정 오류
   • CORS는 HTTP OPTIONS 요청으로 서버가 요청 허용하는지 확인해. 이 설정 제대로 안 하면 에러가 남.
3. 인증과 쿠키 관련 문제
   • 인증 정보나 쿠키 포함된 요청 보낼 때, Access-Control-Allow-Credentials 헤더 없거나 설정 안 맞으면 에러 뜸.

CORS 에러의 결과

• 브라우저 콘솔 에러 메시지 출력
  • 예: No 'Access-Control-Allow-Origin' header is present on the requested resource.
• API 요청 실패
  • 에러 때문에 클라이언트가 필요한 데이터 못 가져옴.

CORS 에러 해결 방법

1. 서버 헤더 설정

CORS 에러 해결하려면 서버가 적절한 헤더 포함해야 돼. 아래는 주요 헤더 설정 방법:

• Access-Control-Allow-Origin
  • 허용할 도메인을 명시하거나, *로 모든 도메인 허용 가능.

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

• Access-Control-Allow-Methods
  • 허용할 HTTP 메서드 설정.

  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
  Access-Control-Allow-Origin: https://example.com

예제 (Spring Boot):

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 {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")                     		// 모든 요청에 대해
                .allowedOrigins("http://localhost:5173")          // 허용할 도메인 (Vue 애플리케이션의 주소)
                .allowedMethods("GET", "POST", "PUT", "DELETE")   // 허용할 HTTP 메소드
                .allowedHeaders("*")                              // 허용할 헤더
                .allowCredentials(true);                           // 쿠키를 전송하려면 true로 설정
    }
        };
    }
}

2. 프록시 서버 사용

개발 환경에선 프록시 서버로 클라이언트와 서버가 같은 출처처럼 보이게 설정할 수 있음

예제 (Vue CLI):

vue.config.js 파일:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // Spring Boot 서버 주소
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

3. 브라우저 확장 프로그램 사용

테스트 용도로 브라우저 확장 프로그램(CORS Unblock 등)을 사용할 수 있어. 하지만 운영 환경에선 쓰면 안 됨.

주의사항

1. 운영 환경에선 보안을 위해 특정 도메인만 허용해야 함.
2. 프록시 서버나 브라우저 확장은 임시 해결책으로만 사용하고, 실제 서비스엔 적합하지 않음
3. 헤더 설정이 정확한지 확인하려면 브라우저 네트워크 탭(F12)에서 체크