[Spring][React] CORS Access-Control-Allow-Origin

스프링과 리액트를 사용하여 진행할 때 발생한 문제이다.

스프링의 Rest API를 사용하다 보면 실제 실행 시 에러가 발생한다.

이는 스프링과 리액트의 포트, 호스트, 프로토콜이 같아야 Same-Origin-Policy 정책을 만족시키는데 실제로 다르기 때문에 서버에서 CORS를 이용한다.

 

나는 Config 파일을 직접 작성했다.

 

Spring

src/main/java/[폴더명]/WebConfig.java

 

통신하려는 react의 포트 번호를 작성한다.

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000");
    }
}

React

src/setupProxyMiddleware.js

 

통신하려는 Spring 서버 측의 포트를 작성한다.

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
    app.use(
        "/",
        createProxyMiddleware({
            target: "http://localhost:8080",
            changeOrigin: true,
        })
    );

};