React, SpringBoot 사이의 CORS 에러 해결

 

SpringBoot with React

 

스프링부트로 서버 개발 시에, 프론트 단이 React인 경우

서버에 Request를 보냈을 시에 CORS 에러가 발생한다.

 

그렇다면 CORS란 무엇일까?

 

 

CORS (Cross-Origin-Resource-Sharing) 란? 🤷‍♂️

교차 출처 리소스 공유를 뜻하는 CORS는, '서로 다른 출처에서 리소스를 공유하는 것'을 뜻한다.

 

여기서 말하는 출처란 다음과 같다.

 

Origin 범위

URL은 https://www.domain.com:3000/user?query=name&page=1 과 같은 형태로 이루어져 있다.

 

이 중, 'Protocol, Host, Port' 를 합쳐 부르는 말이 Origin(출처)이다.

 

이제 이해가 갈 것이다.

 

CORS 허용 설정을 하지 않았을 경우,
서버와 다른 Origin을 가진 곳에서 서버의 Origin에 요청을 보내면 CORS 에러가 발생하는 것이다.

 

 

React에서 Spring에 Request 시, 오류 발생 원인 🤨

CORS 에러가 발생한 경우 Origin이 달라서라는 것을 이젠 이해하였다.

 

그럼 어떤 점이 어떻게 다르기에 오류가 발생했었던 것일까?

 

 

그 이유는 발생한 오류 메세지를 통해 확인할 수 있었다.

Access to XMLHttpRequest at 'http://localhost:8080/competition/add' 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.

 

내가 개발 중인 스프링부트 서버의 Origin은

'http://localhost:8080'

 

서버에 요청을 보낸 React의 Origin은

'http://localhost:3000'

 

Origin의 port 부분이 상이하기 때문에 문제가 발생하는 것이었다.

 

원인을 이해하고 해결 과정을 거쳤다.

 

해결 과정은 다음과 같다.

 

 

해결 과정 🛠

 

스프링부트 서버에 http://localhost:3000 오리진의 요청에 대하여 CORS를 허용해주면 되기 때문에

 

WebMvcConfigurer 를 implements한 WebMvcConfig 클래스를 생성하여 해당 오리진에 대한 CORS를 허용하여 문제를 해결하였다.

 

WebMvcConfg.java

package com.jul.jumpropetornamentchecker.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
@EnableWebMvc
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("OPTIONS","GET","POST","PUT","DELETE");
    }

}

 

config 패키지를 생성 후, 패키지 내부에 해당 클래스를 생성하여 설정하니 문제가 해결되었다.

 

addCorsMappings 메서드를 오버라이딩하여

 

모든 RequestMapping에 대하여, 통신을 주고 받는 React Origin의 요청에 대해 CORS를 허용해주었다.