[Springboot,React] CORS 해결하는 방법

📌CORS란?

 

Cross-Origin-Resource-Sharing Polict의 약자로 다른 출처의 자원을 공유할 수 있도록 설정하는 권한 체제이다.

예를 들어 내가 스프링 프로젝트는 9000번 포트에서 열었는데 리액트는 3000번 포트에서 열었다면 cors 설정을 제대로 해주지 않는 경우 원하는 대로 리소스를 공유하지 못한다. 

 

이런 CORS 보안정책이 발생하는 이유는 SOP(Same Origin Policy) 때문인데 동일한 출처의 Origin만 리소스를 공유할 수 있게 하는 역할을 한다. 만일 동일한 출처가 아니라면 여러 options를 이용해 preflight를 이용해서 여러 검증을 거친다. 

 

https://wonit.tistory.com/571

[HTTP] OPTIONS 헤더와 Preflight 그리고 CORS

 

 

 

📌 스프링부트에서 CORS를 해결할 수 있는 3가지 방법

 

CORS 설명은 여기까지 하고 스프링부트에서 CORS를 해결할 수 있는 방법은 3가지이다. 나는 첫번째 방법만 성공이됐다.

 

1. CORSFilter 생성하기 

 

filter라는 디렉토리를 생성하고  CorsFilter 클래스를 하위에 하나 생성한다. 

 

 
 
import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;
 
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
 
    }
 
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
 
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
 
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods","*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, Authorization");
 
        if("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        }else {
            chain.doFilter(req, res);
        }
 
    }
 
    @Override
    public void destroy() {
 
    }
}
 

 

@Component를 통해  해당 클래스를 스프링 컨테이너에  빈으로 등록할 수 있다. 

https://wonit.tistory.com/572

[Spring Boot] CORS 를 해결하는 3가지 방법 (Filter, @CrossOrigin, WebMvcConfigurer)

---

2. WebMvcConfigurer 설정

 

이 방법은 global하게 등록하는 방법이다. 나는 이 방법으로 성공하지 못했지만 이 방법으로 성공한 사람들도 많은 것 같다. 이 방법도 두가지로 나뉘는데 둘 중에 되는걸로 골라서 사용하면 될 듯하다.

 

2-1. WebConfig 클래스를 만들어서 설정

 

config 폴더를 만들고 하위에 WebConfig 클래스를 만들어준다.

 

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST")
                .maxAge(3000);
}

https://lovon.tistory.com/156

SpringBoot CORS (WebMvcConfigurer 사용) 적용 방법

https://dev-pengun.tistory.com/entry/Spring-Boot-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

[Spring Boot] CORS 설정하기

 

 

2-2. Spring 프로젝트의 main함수에 Bean으로 Configurer를 추가한다.

 

 

@SpringBootApplication
public class RestServiceCorsApplication {
 
    public static void main(String[] args) {
        SpringApplication.run(RestServiceCorsApplication.class, args);
    }
 
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("http://front-server.com");
            }
        };
    }
 
}

 

 

---

3.CrossOrgin 어노테이션 사용

 

컨트롤러에서 특정 메서드 혹은 컨트롤러 상단부에 @CrossOrigin을 추가한다. 

 

 

@RestController
@RequestMapping("/somePath")
public class SomeController {
 
    @CrossOrigin(origins="*")
    @RequestMapping(value = "/{something}",method = RequestMethod.DELETE)
    public ResponseEntity<String> delete(@PathVariable Long reservationNo) throws Exception{
    }
 
}
 

 

내가 찾은 방법은 3가지인데 build.gradle에 의존성을 주입하는 방법도 있다고 한다. 근데 이건 pom.xml을 수정해야하는데 

이 파일은 Maven의 빌드정보를 담고 있다. 나 같은 경우는 프로젝트에 pom.xml이 없었다. 스프링부트는 빌드 도구로 gradle을 쓰니까 없는것으로 추측하고 있다(아니라면 댓글로 알려주세요! 감사합니다!)

 

그래서 build.gradle의존성 주입은 부트 보단 스프링 프로젝트를 만드는 경우 적합할 것 같았다. 

 

 

https://abbo.tistory.com/147

Spring 에서의 CORS 해결 일지

 

 

📌 리액트 CORS 설정

 

프론트에서도 CORS 설정을 해줘야 한다. 리액트 내부 설정은 http-proxy-middleware와 axios CORS설정을 해주었다.

 

1. http-proxy-middleware

 

http-proxy-middleware 라이브러리를 통해 수동설정을 한다.

 

npm install http-proxy-middleware

 

특히 CRA 환경에서 작업을 할때는 src 폴더에  setupProxy.js 파일을 만들어줘야 제대로 앱이 프록시 파싱을 할 수 있다고 한다. proxy관련 파일은 반드시 ./src에 위치해야한다. 

 

const { createProxyMiddleware } = require("http-proxy-middleware");
 
module.exports = function (app) {
  app.use(
    createProxyMiddleware("/api/v1", {
      target: "http://localhost:9000",
      changeOrigin: true,
    })
  );
};

위와 같이 setupProxy.js 파일을 작성해준다. 

 

 

[axios 전역 설정]
axios.defaults.withCredentials = true;

 

리액트 코드 내에 axios 전역 설정을 해주었다.

 

그리고 axios 쓰려면 상단에 import도 해야한다

 

https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-CORS-%EC%BF%A0%ED%82%A4-%EC%A0%84%EC%86%A1withCredentials-%EC%98%B5%EC%85%98

[AXIOS] 📚 CORS 쿠키 전송하기 (withCredentials 옵션)

 

 

https://hoons-up.tistory.com/26

[Develop/React] proxy 수동 설정(setupProxy)

https://velog.io/@yunsungyang-omc/React-React-App%EC%97%90%EC%84%9C-CORS-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

(React) React App에서 CORS 이슈 해결하기

https://artistjay.tistory.com/26

[React] axios cors 에러 해결방법

https://spring.io/guides/gs/rest-service-cors/

Enabling Cross Origin Requests for a RESTful Web Service