[Spring Boot] React와 RestApi 통신할 때 발생하는 cors 해결하기

제가 최근에 React 클라이언트와 개발을 하면서 "Access to XMLHttpRequest at 'api 서버' from origin '클라이언트 서버' has been blocked by CORS policy : No 'Access-Control-Allow-Origin' header is present on the requested resource"

라는  Cors 에러가 였습니다.

 

 

이 에러를 해결하기 위한 2가지 방법을 소개하려고 합니다.

 

1. Request가 들어오는 Controller에 개별적으로 @CrossOrigin Annotation을 붙여주는 방법이 있습니다.

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;

public class TestApiController {
    @CrossOrigin("*")
    @GetMapping("/home")
    public String home(){
        return "/home";
    }
}

 

2. 모든 Request에 적용되도록 Configuration을 설정하는 것입니다. config package를 만들고 "WebConfig" 파일을 만들어줍니다. WebConfig 파일에 아래와 같이 코드를 설정해주시면 됩니다.

- allowedOrigins: 요청을 보내는 페이지를 설정

- allowedMethods: 요청을 허용하는 메소드

- maxAge: 요청 결과에 대한 시간

 

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

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

 

 

<그 외>

Cors에러가 해결된 이후 postman을 통해 api는 확인이 잘 되지만 아래와 같은 에러가 뜨는 경우가 있습니다.

"Network Error

at CreateError(createError.js)

at XMLHttpRequest.Error~"로 인해 서버쪽 500 (Internal Server Error)가 뜨신다면 react분이 아래 링크의 stackoverflow를 참고해보시길 바랍니다.

react분이 axios를 사용하셨는데 아래 링크와 error처리를 해주시니 해결되었습니다.

https://stackoverflow.com/questions/50950011/axios-post-request-fails-with-error-status-code-500-internal-server-error

Axios POST request fails with error status code 500: Internal Server error