[Tip] CORS 문제 해결 방법 (Springboot <-> React)

 

 

목차

1. CORS 란?

2. CORS 동작 방식

3. Springboot 와 React 사이 CORS 오류 해결 방법

 

CORS 란?

 

 

Cross-Origin Resource Sharing(교차 출처 리소스 공유)

 : 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조

: 같은 출처에서만 리소스를 공유할 수 있다는 규칙을 가진 정책인 SOP(Same Origin Policy, 동일 출처 정책) 과는 다르게 다른 출처 리소스에 접근성을 높이기 위해 CORS가 등장했다.

 

 

 

CORS 동작방식

 

🔸Simple Requests (단순 요청)

 - 예비 요청을 보내지 않고 서버에 본 요청을 보낸 후, 서버가 응답 헤더에 Access-Control-Allow-Origin 과 같은 값을 보내면 그 때 브라우저가 CORS 정책 위반 여부를 검사하는 방식

 

🔸Prelight Requests (예비 요청)

- 본 요청을 보내기 전에 보내는 예비 요청으로 OPTIONS 메소드가 사용된다.

 

🔸Credentialed Requests (신용요청)

- 인증된 요청을 사용하는 방법으로 쿠키, 인증 헤더, TLS 클라이언트 인증서 등의 신용정보가 함께 요청된다.

 

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

 

Springboot <-> React 연결(CORS 에러 해결 방법)

 

Springboot 

 

// WebConfig.java

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

 

==> https://localhost:3000(React:Client Server) 에서의 모든 메서드를 허용한다

 

+ 추가적으로 Spring security 설정을 해놨다면

spring.autoconfigure.exclude=org.springframework.boot.autoconfigure.security.servlet.SecurityAutoConfiguration

 

application.properties 에 위 코드 추가 혹은 Application.java 파일에서

@SpringBootApplication 어노테이션 옆에 밑의 코드 추가

(exclude = SecurityAutoConfiguration.class)

 

 

ReactJS

 

// package.json
 
 ...
  
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "proxy": "http://localhost:8080",
    "eject": "react-scripts eject"
  },
  
  ...

 

==> package.json 파일에 scripts 부분에서 proxy 부분을 추가한다.

localhost:8080(Springboot Server)