첫 번째 오류

Access to fetch at 'http://도메인주소/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

번역해보면

원본 'http://localhost:3000'의 'http://도메인주소:8080/login'에서 가져오기 위한 액세스가 CORS 정책에 의해 차단되었습니다. 실행 전 요청에 대한 응답이 액세스 제어 검사를 통과하지 못했습니다.
요청의 자격 증명 모드가 'include'인 경우 응답의 'Access-Control-Allow-Origin' 헤더 값은 와일드카드 '*'가 아니어야 합니다.

브라우저가 보안상의 이유로 동일한 출처 이외의 URL은 모두 요청을 제한한다.

동일한 출처

• 프로토콜
• 도메인(또는 IP주소)
• 포트

문제 원인

/**
 * 스프링부트-리액트 CORS 연동
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {

    // 프론트엔드-백엔드 CORS 설정
    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")
                .allowedOrigins("*") // TODO 학교에서는 사용 중인 IP 주소 변경하기
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600); // 1 hour
    }

.allowedOrigins() 를 와일드카드(*) 로 설정해놓으면 모든 요청을 허용한 것처럼 보일 수 있으나 인증 정보(쿠키 및 HTTP 인증 등)에 포함된 요청은 차단한다.

해결 방안

/**
 * 스프링부트-리액트 CORS 연동
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {

    // 프론트엔드-백엔드 CORS 설정
    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")
                .allowedOrigins("http://클라이언트 IP주소:3000") // TODO 학교에서는 사용 중인 IP 주소 변경하기
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600); // 1 hour
    }

로 수정하였으나 똑같이 오류가 발생하였다.

두 번째 오류

Access to fetch at 'http://도메인주소:8080/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 

No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Login.js:104 

번역

원본 'http://localhost:3000'의 'http://도메인주소:8080/login'에서 가져오기 위한 액세스가 CORS 정책에 의해 차단되었습니다. 실행 전 요청에 대한 응답이 액세스 제어 검사를 통과하지 못했습니다.
요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. 불투명한 응답이 요구 사항을 충족하는 경우 요청 모드를 'no-cors'로 설정하여 CORS가 비활성화된 리소스를 가져옵니다.

문제 원인

나같은 경우 프론트, 백엔드 각자 로컬 컴퓨터에서 개발하고 있다.
클라이언트 개발자의 로컬 컴퓨터, 즉 클라이언트의 로컬 서버 주소(http://localhost:3000) 가 서버의 CORS 정책에 명시된 허용된 주소 (http://클라이언트 IP주소:3000)와 달라서 CORS 정책 위반이라고...

문제 해결

/**
 * 스프링부트-리액트 CORS 연동
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {

    // 프론트엔드-백엔드 CORS 설정
    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000") // TODO 학교에서는 사용 중인 IP 주소 변경하기
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600); // 1 hour
    }

개발 환경이니 http://localhost:3000 로 작성하였다.
운영 환경이고, 인증 정보를 포함한다면 특정 도메인 주소를 기재하는 게 제일 좋겠다.