프론트에서 백엔드에 API 호출하는 코드 짠다

자바스크립트의 fecth 함수를 통해 구현한 Todo 아이템 불러오고 추가하고 수정하고 삭제하는 부분 작성

Cors

애플리케이션 실행하자마자 리스트 불러와야함

App.js 컴포넌트 함수 내에서 todo API 를 사용해 리스트 초기화하기

const requestOptions = {
    method: "GET",
    headers: {"Content-Type": "application/json"}
  };
fetch("<http://localhost:8080/todo>", requestOptions)
  .then((response)=>response.json())
  .then(
    (response) => {
      setItems(response.data);
    },
    (error)=>{

    }
  );

App.js에서 작성한다

CORS 헤더 Policy를 위반했다고 알려줌

<aside> ❓ CORS Cross- Origin Resource Sharing 의 약자 처음 리소스를 제공한 도메인이 현재 요청하려는 도메인과 다르더라도 요청을 허락해주는 웹 보안방침

</aside>

프론트 서버와 백 서버는 포트번호가 각각 3000, 8080으로 다르므로 요청이 거절됨

가능하게 하기 위해서는 백엔드에서 CORS 방침 설정을 해줘야 함

package com.example.demo.config;
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 WebMvcConfig implements WebMvcConfigurer{
    private final long MAX_AGE_SECS= 3600;

    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOrigins("<http://localhost:3000>")
                .allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(MAX_AGE_SECS);
    }
}

WebMvcConfigurer.java

해석하자면 모든 경로 (/**) 에 대하여 Origin이 http://localhost:3000 인 경우 GET, POST, PUT … 메서드 이용한 요청을 허용한다는 뜻, 또한 모든 헤더와 인증에 관한 정보 (Credential)도 허용

추가하면 더이상 CORS 에러가 나지 않는다