[BackEnd/Spring] SpringBoot CORS 설정

 

🍑 CORS 설정 1

Access to XMLHttpRequest at 'http://localhost:5050/auth/login' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

Vue에서 SpringBoot 서버로 REST API를 요청했을 때 다음과 같은 CORS 에러가 발생한다. 

 

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:8080")
                .allowCredentials(true);
    }
}

 

🍑 CORS 설정 2

Access to XMLHttpRequest at 'http://localhost:5050/user/image?image_path=images%2Fprofile%2F5.jpg' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

 

📌 Spring Security를 사용하는 경우에만 해당

 

인증 토큰을 같이 전송하여 인증 과정을 거칠 경우 또 CORS 에러가 발생하였다.

Spring Security 설정 부분에서 다음과 같이 CORS 설정을 추가해준다. 

 

// WebSecurityConfig.java
@Override
protected void configure(HttpSecurity http) throws Exception {
    http
            ...
            .and()
            .cors()
            ...
}

 

https://velog.io/@hellozin/Spring-API-%EC%84%9C%EB%B2%84%EC%97%90%EC%84%9C-PUT-DELETE-%EC%9A%94%EC%B2%AD-%EC%8B%9C-CORS-%EC%84%A4%EC%A0%95%EC%9D%B4-%EC%A0%81%EC%9A%A9-%EC%95%88%EB%90%98%EB%8A%94-%EA%B2%BD%EC%9A%B0

Spring API 서버에서 PUT, DELETE 요청 시 CORS 설정이 적용 안되는 경우

 

---

Ref.

Spring Boot + Vue CORS 설정 - 저장하고 까먹자 (jungguji.github.io)

[Spring Security] CORS 에 대하여 :: Icarus (tistory.com)