[Spring] CORS 문제 해결하기!

전현준·2024년 1월 7일

Spring

목록 보기

7/17

🤔 이전화

[Spring] CORS 알아보기

⛔ CORS 발생 이슈

때는 바야흐로 작년 12월 중순, 그때 갑작스레 프론트쪽에서 연락이 왔다.

CORS가 발생한다는 이슈.. CORS는 사실 Backend에서 설정이 중요하지만,
Frontend에서도 설정을 해야하기 때문에, 누구의 잘못으로 발생하는지 바로 알기는 쉽지 않다.

프론트쪽 둘 다 그런 이슈가 발생하다니 다시 코드를 천천히 살펴보았다. 🔎

사실 그 당시에는 뭐 때문인지 몰랐는데 내가 추리한 결과를 이야기 해보겠다.

✒️ 사건

[발단] API 호출할 때 보안을 위해 JWT 토큰으로 검증 방식으로 변경하자는 논의

[전개] 로그인을 제외한 대부분의 API에 토큰을 헤더에 넣어 보내는 방식으로 변경함

[위기] 프론트쪽에서 갑자기 CORS가 발생한다는 이슈

[절정] 나 : "왜 CORS?????" 고민하면서 많은 테스트

[결말] 어쨌든 해결함 ..ㅎ

~~거의 개발자 드라마;~~

🆘 문제점

지금보면 굉장히 간단했다.

새롭게 헤더에 "token" 이라고 추가했고, token의 헤더가 허용이 되지 않았으니 CORS 오류가 발생한 것으로 보인다. ~~왜 지금 보니 굉장히 간단한걸.. 8시간 정도 붙잡고 있었던거 같은데..~~

👨🏻‍💻 내가 시도했던 방식

물론 이 방식은 굉장히 고전적입니다. 제 머리속에서 나온 생각이라 굉장히 구린 아이디어 입니다.
아마 찾아보면 더 괜찮은 방식이 있을 수 있습니다.

새벽 3시였기 때문에, 내가 고치자마자 프론트쪽에서 잘 되냐고 물어볼 수가 없었다.

게다가 React는 전혀 모르고, 내 컴퓨터에는 세팅이 안되어 있기 때문에 실행되지도 않을 것이다.

그러면 내가 cross-origin 상황만 만들어서, 브라우저에서 내가 요청을 보내보자!

환경

요청 Client    : AWS 서버(가짜 IP) 151.253.345.42

Server          : Spring Boot Tomcat localhost:8080

헤더 내 토큰 : 헤더 내부에 token을 담아 요청하기

브라우저       : Chrome

나는 서버를 가지고 있어서 다른 도메인에서 보낼 수 있었다.

테스트 기기가 두개라면 서로 다른 네트워크 망에 연결해서 요청을 보내면 외부 주소로 설정되니
cross-origin 상황이 만들어진다.

❗ 물론 실제 사용할 환경에서 테스트하는게 제일 좋습니다 ❗

❗ 저는 이 방식으로 테스트를 했는데, 되도록이면 따라하지 않는 것이 좋습니다.
해결이 안될 확률도 매우 높습니다. ❗

✅ 1. 크롬 확장프로그램 설치 (생략 가능)

HTTP 통신 에서 헤더에 꼭 추가해서 보내야 할 내용이 있다면 아래 확장 프로그램을 설치하자.
⚠️ 헤더에 필요한 내용이 없다면 넘어가도 괜찮다.

modHeader 확장프로그램 설치

설치 후 Chrome 우측 상단 URL 우측에서 실행 할 수 있다.

아래와 같이 내가 보내고 싶은 헤더를 추가해서 체크해두면 준비 완료이다.

✅ 2. 보내는 위치에 접속하기

현재 요청을 보내는 곳이 151.253.345.42 이므로 Chrome에서 URL로 접속해주자.

여러분들은 요청을 보낼 곳의 IP 주소로 접속하시면 됩니다! 위의 주소는 가짜입니다..!

✅ 3. 로컬에서 서버 열기

Spring Boot를 실행하여 서버를 연다.

허용할 IP 주소에 151.253.345.42로 작성한다.

package -;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

import java.util.Arrays;
import java.util.List;

@Configuration
public class CorsConfig {
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration config = new CorsConfiguration();

        config.setAllowCredentials(false);
        // config.setAllowedOrigins(Arrays.asList("허용할 IP 주소"));
        config.addAllowedOrigin("151.253.345.42");
        config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"));
        config.setExposedHeaders(List.of("token","Authorization","Content-Type", "Accept"));
        config.setAllowedHeaders(List.of("token","Authorization","Content-Type", "Accept"));

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);

        return source;
    }
}