[React] 로컬 환경에서 CORS 이슈 임시로 해결하기 + 스프링 CORS 설정

백엔드와 프론트엔드를 동시에 만지는 중이라서

결국 손 놨던 리액트까지 다시 공부중이다

 

회원가입 + 로그인 로직을 건드리는 중인데

분명 백엔드 서버에서 CORS 설정을 해놨는데도 자꾸 팅기는 것이다

그래서 적어보는 프론트 단에서 CORS 이슈 해결하는 방법

 

 

✨ 개발 환경

Spring Boot
React

 

📌 CORS ?

Cross Origin Resource Sharing 의 약자

하나의 도메인에서 다른 도메인의 리소스에 접근할 수 있게 해주는 보안 메커니즘

동일 출처 정책(SOP), 즉 프로토콜과 호스트명, 포트가 같은 출저의 리소스에만 접근할 수 있도록 제한하는 정책 때문에 등장했으며 현재는 다른 서버에서 제공하는 API를 사용하는 일이 많아 더욱 더 필요하게 되었다

 

 

웹 개발을 처음 시작하는, 특히 프론트에게 있어서 지옥을 보여주는 메세지

 

보통 백엔드 서버 쪽에서 먼저 이 CORS를 허용해둬야

axios나 ajax를 이용한 API 통신이 가능하다

 

 

🔨 스프링 부트 서버에서 CORS 설정

📝 SecurityConfiguration.java

public class SecurityConfiguration {
    private final JwtAuthenticationEntryPoint jwtAuthenticationEntryPoint;
    private final JwtAuthenticationFilter jwtAuthenticationFilter;
    private final JwtAccessDeniedHandler jwtAccessDeniedHandler;


    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .cors().and()
                ...
                ...
                return http.build();
    }

    /** cors 설정 configuration bean */
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        //모든 ip에 응답 허용
        configuration.addAllowedOriginPattern("*");
        configuration.addAllowedMethod("*");
        configuration.addAllowedHeader("*");
        //내 서버의 응답 json 을 javascript에서 처리할수 있게 하는것(axios 등)
        configuration.setAllowCredentials(true);
        configuration.setMaxAge(3600L);

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

스프링 시큐리티를 사용한다면 해줘야하는 시큐리티 필터 설정

이곳에서 HttpSecurity의 CORS 사용 설정을 허용해준다

 

또 CorsConfigurationSource 빈을 하나 만들어 설정해준다

 

이 방법은 상당히 안좋은 방법이긴 하다

왜냐면 모든 Origin 에 대하여 리소스 공유를 허용한 것이기 때문이다

서버 개발 시 급하면 와일드카드로 전체 허용하는 경우가 많다

 

실제 배포시에는 addAllowedOrigin 에 내 프론트 서버 Origin 만 허용해주는 게 옳다

 

(스프링 업데이트 되면서 addAllowedOrigin 이랑 setAllowCredentials 를 같이 사용할 수 없다

addAllowedOriginPattern으로 사용하자)

 

그외 백엔드에서 설정하는 자세한 방법은 여기로

 

 

🔨 리액트에서 CORS 설정

하지만 나의 경우 이렇게 설정하더라도 CORS 이슈로 Axios 요청이 계속 거부되었다

 

이를 임시로 해결하는 방법이 있는데

package.json 에 프록시 설정을 해주는 것이다

 

📝 package.json

{
  ...
  "proxy": "https://api.examplesite.net"
}

 

proxy를 추가해주고 http 통신을 할 사이트 도메인을 적어준다

 

📝 api.js

import axios from 'axios';

const AuthApi = {
  requestJoin: async () => {
    const data = await axios.get('/join', {});

    console.log(data);
    return data;
  },
};

export default AuthApi;

콘솔 찍어보고 테스트를 해본다

 

CORS 이슈가 해결되었다

서버로부터 올바른 응답을 받았다

응답 헤더에 아까 스프링 서버에서 설정해둔 CORS 관련 설정도 같이 있다

 

끗

 

(수정) 위 방법은 로컬 개발환경에서만 가능하다

실제 AWS 서버 같은데에 올리면 다시 CORS 이슈가 발생한다

그리고 사실 CORS는 백엔드에서 수정해주는게 거의 맞다