프론트에서 CORS 에러를 해결하자

 프로젝트를 진행 중 CORS 에러가 발생했다. 

 

 CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션의 보안 정책 중 하나로, 클라이언트가 서로 다른 출처(Origin)에서 자원을 요청할 때 브라우저가 허용할지 말지를 결정하는 메커니즘이다.

 

 즉, 서로 다른 도메인끼리 데이터를 주고 받을 수 없기에 백엔드에서 CORS 관련 설정을 해주어야 한다.

 

 그런데 백엔드에서 CORS 관련 설정을 다 했음에도 불구하고 해당 오류가 계속해서 발생하였다...

 

//SecurityConfig.java

@Configuration
public class SecurityConfig {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .cors(cors -> cors.configurationSource(corsConfigurationSource()))
                .csrf(csrf -> csrf.disable())
                .authorizeHttpRequests(authorize -> authorize
                        .anyRequest().permitAll()
                );
        return http.build();
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("http://localhost:3000"));
        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
        configuration.setAllowedHeaders(Arrays.asList("Authorization", "Cache-Control", "Content-Type"));
        configuration.setExposedHeaders(Arrays.asList("JSESSIONID"));
        configuration.setAllowCredentials(true);
        configuration.setMaxAge(3600L);

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

 

 위의 코드처럼 SecurityConfig.java 파일에 CORS 세부사항을 명시적으로 설정했음에도 불구하고 브라우저에 쿠키가 자동으로 저장되지 않으면서 CORS 에러가 계속해서 발생했다.

 

//auth.ts

let setCookie = authResponse.headers.get('set-cookie');
    if (setCookie) {
      const parsed = cookie.parse(setCookie);
      cookies().set('JSESSIONID', parsed['JSESSIONID'], {
        ...parsed,
        maxAge: 1800, //30분
        path: '/'
      });
    }

 

 그래서 로그인 요청 후 헤더에 담겨있는 쿠키를 프론트에서 직접 저장했음에도 api 요청을 보낼 때 CORS 에러가 발생한다.

 일주일 내내 백엔드가 이 에러를 붙잡았지만 해결이 되지 않았고, 이대로 프로젝트 진행을 더 미룰 순 없기에 프론트에서 뭔가 할 수 있는 게 없을까 찾아보다가 프론트에서 CORS를 해결하는 방법을 찾았다.

 

 바로 next.config.js 파일의 프록시 기능을 사용하는 것이다.

 

 

 현재 문제가 쿠키가 자동으로 브라우저에 저장되지 않아 프론트에서 수동으로 저장한 결과 JSESSIONID라는 쿠키의 도메인이 프론트의 도메인인 localhost:3000으로 되어있고, 서버의 도메인과 다르기에 CORS 문제가 발생한다.

 

 

 여기서 next.config.js의 프록시(rewriting) 기능을 사용하면 아래의 동작 과정이 이루어지게 된다.

1. 클라이언트가 api 경로로 요청을 보낼 때, 브라우저는 해당 경로를 그대로 Next.js 서버에 전달한다.
2. Next.js 서버는 next.config.js에 정의된 rewrites를 확인하고 이에 적혀진 대로 경로를 변환한다.
3. Next.js 서버가 변환된 url로 외부 서버에 요청을 보낸다.
4. 요청이 처리된 후, 받은 응답 데이터를 다시 클라이언트로 전달한다.

위의 기능을 사용하면 외부 서버와 도메인이 같아지기에 CORS 문제를 해결할 수 있다.

 

//next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/photo/:path*',
        destination: `${process.env.NEXT_PUBLIC_BACKEND_API_SERVER}/photo/:path*`, // 프록시로 보낼 API 주소
      }
    ];
  }
};

module.exports = nextConfig;

 

 next.config.js에서 위의 코드처럼 적어주면 source의 경로를 next.js 서버가 destination에 해당하는 경로로 변환을 해준다.

 

 CORS 오류는 보통 백엔드에서 해결해야 하는 문제지만 본인처럼 백엔드가 CORS 설정을 다 했음에도 오류가 발생한다면 무작정 기다리지 말고 프론트에서 위의 방법으로 해결을 해보자.