리액트에서 호출 시 CORS 이슈

 

 

위 콘솔 에러는 리액트에서 스프링 서버를 호출할 때, 발생하는 에러이다. 

 

 

이슈 원인은 CORS에 있다.

 

CORS(Cross-Origin Resource Sharing)란 서로 다른 출처의 자원을 공유할 수 있도록 설정하는 권한 체제를 말하며, 서로 다른 출처 사이 통신중에 Access-Control-Allow-Origin을 허용해주지 않으면 브라우저 단에서 호출하지 못하도록 막아버리는 문제가 발생하여 원하는 리소스를 호출하지 못하게 된다. 따라서 API 서버 측에서 CORS에 대한 설정이 필요하다.

 

이때 출처란? URL 구조에서 Protocal, Host, Port를 합친 것을 말한다. 셋 중 하나라도 다르면 다른 출처로 분류된다.

Origin

- 서로 출처가 같은 경우

http://www.domain.com:80/category 

http://www.domain.com:80/user 

http://www.domain.com:80?query=all

http://www.domain.com:80?page=1

 

 

- 서로 출처가 다른 경우

http://www.domain.com:80

http://www.domain.com:8080 

http://www.domain1.com:80

https://www.domain.com:80

 

 

따라서 http://localhost:3000에서 http://localhost:8080를 호출하면 포트번호가 다르기 때문에 다른 출처가 되고 서로 공유 할 수 없는 결과가 초래된다.

 

 

 

이를 해결하기 위해서 스프링부트에서 config 패키지를 만들고

 

 

아래와 같이 WebMncConfig 파일을 생성해준다.

package hello.hellospring.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")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

위 코드는 모든 경로(/**)에 대해 출처가 http://localhost:3000인 경우 명시된 Methods들을 통한 요청에 대해 CORS를 허용하고, 모든 헤더와 인증에 관한 정보도 허용한다는 의미이다.

 

 

이렇게 config 파일을 추가하고 확인해보면 정상적으로 데이터를 호출 받는 것을 볼 수 있다.