본문 바로가기

항해99/프로젝트

[항해99] AWS EC2 CORS 해결하기

프론트랑 협업중에 CORS 해결해달라는 요청이 왔다..

백엔드에서는 8080 포트를 사용하는데, 프론트에서는 3000 포트를 사용했다. , SOP(Same Origin Policy) 위반했기 때문에 CORS 문제가 발생했다.

Access to XMLHttpRequest at '
http://{aws주소}/api/user/signup
' from origin '
http://localhost:3000
' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

그래서 여러 블로그들 참고했는데, 다 어댑터 사용한 코드들이라 어떡하지 하던 중에!!

다른 조에서 도움을 주셨다 ㅠ_ㅠ (감사합니다 1조분들....)

 

우선 CORS에 대해 알아보자

 

CORS(Cross-Origin Resource Sharing)

어떤 애플리케이션이 다른 도메인의 리소스(데이터 또는 API) 액세스할 있는지 제어를 위해 브라우저에서 구현하는 보안 기능

이는 브라우저가 동일 출처 정책을 시행하는 방법으로, 악성 스크립트가 서로 다른 출처(도메인) 걸쳐 민감한 데이터에 액세스하는 것을 방지하기 위한 보안 조치

 

해결방법

webconfig에 있는 필터 부분에 이 코드를 추가해준다.

http.cors(cors ->
                cors.configurationSource(corsConfigurationSource())
        );

사실 이해를 잘 못해서 챗gpt한테 물어봤는데,

 

CORS 구성하기 위해 기능적 스타일 구성으로 Spring WebFlux 사용하고 있는 같습니다.

경우 http.cors() Spring WebFlux RouterFunctions에서 제공하는 기능적 DSL 일부입니다.

 

이렇게 알려줬다.. 그냥 제공해주는 기능이라고 생각하면 되나..?ㅎ 기술매니저님께 자세하게 여쭤봐야겠다 ..

 

+

Access-Cotrol-Allow-Origin 헤더 세팅으로 CORS를 해결했으나 헤더에 Authorization 값이 안 들어가는 문제가 추가적으로 발생했다. 그 후 참고 자료를 통해configuration.addExposedHeader("Authorization");를 추가해 헤더에 Authorization Token이 정상적으로 추가되도록 수정했다

 

그리고 Bean을 생성해주고 아래 코드와 같이 적어줬다.

@Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();

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

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

 

원래 * <- 이 부분에 주소를 적어줘야하는데, 일단 모든 경로를 열어두었다.

https://toycoms.tistory.com/37

 

Spring Security CORS

CORS란? - HTTP 요청은 기본적으로 Cross-Site HTTP Requests가 가능합니다. Simple 하게 다른 도메인의 Resource를 사용하는것을 말합니다. 하지만 Cross-Site HTTP Requests는 Same Origin Policy를 적용 받기 때문에 요청

toycoms.tistory.com

해당 블로그에 가시면 자세한 내용을 보실 수 있습니다

 

요 부분은 사실 좀 뭐지..? 이런 느낌이 있어서 이 번주에 기술매니저님께 여쭤보고 추가로 올려야겠다ㅠㅠ

 

+ 인증부분 문제가 생겨서 코드 추가를 했다.

configuration.addExposedHeader("Authorization");