Intro

오랜만에 하는 리액트라서 이리저리 이슈 잡으러 다니는 중이다. 이번에는 axios를 쓰면서 생겼던 network error를 잡아보자.

React Axios

백과 프론트 사이의 http 통신을 위한 프론트 라이브러리 중 하나다.

아래와 같이 node_modules에 라이브러리를 추가하고

npm i axios

아래와 같이 import해서 사용한다.

import axios from "axios";

문의게시판 form을 post로 전송하려는데 에러 발생

uncautht runtime error ~ network error ~

이 axios 에러가 골치 아팠던 이유는 어디가 문제인지 에러에 정확히 안 뜬다는 것이었다.

Get은 잘만 되는데 왜 Post는 안되는 걸까?

정답은 CORS 이슈다.
여기서 Get이 되니까 저번에 했던 CORS 설정은 아니겠지 생각했는데 좀 다른 이슈다.

withCredentials

저번에 WebMvcConfig에 Cors설정을 아래와 같이 했다.

import com.cms.world.aop.BasicInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import java.util.Arrays;
import java.util.List;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("OPTIONS", "GET", "POST", "PUT", "DELETE")
                .allowCredentials(true); //새로 추가
    }
}

기존에 했던 Cors 설정에 allowCredentials를 추가해준다.
프론트도 마찬가지.

axios.post(HOST_URL + "/bbs/test", JSON.stringify({nickName: "user_011007"}), {
          headers: {
            "Content-Type": 'application/json',
          },
          withCredentials: true,  //추가한다. 
          
        }).then(resp => {
          console.log(resp);
        }).catch(error => {
          console.log("error: ", error);
        });

성공~

참고 https://aodtns.tistory.com/121