20220814_WIL(Spring Security CORS)

20220814_WIL

들어가며

금주부터는 프로젝트 구성에 있어 BE뿐만 아니라 FE 조원들까지 합류하여 진행되니 만큼 FE-BE 협업과 관련된 부분들을 필수적으로 익힐 필요가 있었다. 그 중 중요한 한 가지가 바로 CORS였고, 금주는 WIL 작성함에 있어 이 CORS에 대해 함께 정리해보고자 한다.

 

---

CORS(Cross-Origin Resource Sharing)

CORS(Cross-Origin Resource Sharing), 직역하자면 교차 출처 리소스 공유라 해석되며, 서로 출처가 다른 웹 애플리케이션에서 자원을 공유하는 것을 말한다.

보안상의 이유로 SOP(Same Origin Policy) 정책 하에 Cross Origin HTTP Request를 제한하고 있다. 하지만 개발에 있어 React오 Spring Boot 간의 기본 PORT 번호가 다르기에 이에 대한 사전 설정이 되지 않으면 에러가 발생하게 된다.

React : http://localhost:3000
Spirng Boot : http://localhost:8080

CORS 예시

 

🚨 Access to fetch at ‘https://api.lubycon.com/me’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

프론트엔드와 백엔드의 출처가 다르면 위와 같은 에러를 발생한다. 브라우저는 보안상의 이유로 교차 출처 HTTP요청을 제한하기 때문이다. 이를 해결하기 위해선 백엔드에 CORS관련 설정을 해주어야 한다.

 

SecurityConfiguration

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .httpBasic().disable()
                .cors()     //Cors 옵션 활성화
                //...다른 설정들
                ;
    }
    
        //Cors 설정
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();

        configuration.addAllowedOrigin("*");
        configuration.addAllowedHeader("*");
        configuration.addAllowedMethod("*");
        configuration.setAllowCredentials(true);

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

 

HttpSecurity를 인자로 받는 configure메서드에서 http.cors()로 cors 옵션을 활성화 해줄 수 있다. 이때 만약 미리 정의한WebMvcConfigurer 구현체가 존재한다면 corsConfigurationSource()는 추가로 정의 해줄 필요가 없고 정의를 해주지 않았다면 cors설정파일을 빈으로 등록해주어야 한다.

 

추가로 위에서 사용된 CorsConfiguration의 메소드는 아래와 같다.

setAllowedOrigins : A list of origins for which cross-origin requests are allowed.
setAllowedMethods : Set the HTTP methods to allow
setAllowedHeaders : Set the list of headers that a pre-flight request can list as allowed for use during an actual request.
setAllowedCredentials : Whether user credentials are supported.

 

Reference

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

Spring Security CORS 설정하기

[SPSP] Bellman Ford

---

💪금주목표(8/8~8/14)

• 항해99 중도하차 하지 않기
• Spring Boot 다룰 수 있다고 자신있게 말할 수 있게 되기(Mapping 숙달 등)
• 마인드셋 다잡기

---

🤜차주목표(8/15~21)

• 항해99 중도하차 하지 않기
• git 협업 방법 숙달(Organization Repo 사용법 및 rebase 방법 등)
• FE와의 협업, 연결(view 내리기 등) 방법 숙달
• 마인드셋 다잡기

---

이번 주차부터는 프론트엔트 조원들과의 협업이 본격적으로 시작되었다.

처음으로 프론트엔드 인원들과 협업하는 것이니 만큼 어떤 부분들이 가능한지, 또 어떤 부분들을 필수적으로 맞춰야하는지 조차 아직은 잘 모르겠다. 분명 차주 서로의 결과물을 합치는 과정 속에서도 많은 우애곡절이 생길 것만 같다.

클론코딩주차인 차주, 그리고 본격적으로 실전에 돌입하는 다다음주부터의 일정에 앞서 FE-BE 간의 협업 방법을 필수적으로 익힐 필요가 있다. 쉽지는 않겠지만 부딛히면서 성장해 나가보자.

 

항해를 시작한지 이제 한 달이 조금 넘어가는 시점에 접어들었다. 분명 한 달 전의 나와 지금의 나는 개발자로서 크게 성장하였다. 이러한 성장에만 집중하고, 내가 할 수 있을지라는 의심이나 조바심은 잠시 접어둔 채 남은 일정들을 무사히 마무리 해보자.