[AXIOS ERROR] - 스프링 서버와 AXIOS를 사용한 통신할 때 발생하는 ERR_NETWORK 해결하기

ERR_NETWORK를 해결하는 세 가지 방법

 

CrossOrigin 어노테이션 사용하기

@CrossOrigin("*")
@Slf4j
@RestController
@RequestMapping("/api")
@RequiredArgsConstructor

 

RestController 최상단에 @CrossOrigin을 추가하고 와일드 카드를 붙이자.

 

 

 

Config 패키지에 WebMvcConfigurer추가해서 Cors 설정하기

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

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

allowedOrigins에 와일드카드 (*) 사용할 경우 안먹는 경우가 있으니 직접 경로를 설정하자.

 

 

 

 

CorsConfigurationSource 설정하기

@Bean
public CorsConfigurationSource corsConfigurationSource() {

    CorsConfiguration config = new CorsConfiguration();

    List<String> list = new ArrayList<>();
    list.add("GET");
    list.add("POST");
    list.add("PUT");
    list.add("DELETE");

    config.addAllowedOrigin("http://localhost:3000/");
    config.addAllowedHeader("*");
    config.setAllowedMethods(list);
    config.setAllowCredentials(true);

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", config);

    return source;
}

마찬가지로 addAllowedOrigin에 클라이언트 주소를 넣어준다.


보통의 경우 위 세가지 작업으로 해결된다.

혹시 해결이 되지 않거나 AXIOS ERROR, ERR_NETWORK 에러가 아니라면 CORS 문제가 아닐 수도 있다.

API의 엔드포인트에 로그를 찍어보고 콘솔에 로그가 남지 않는다면 클라이언트 문제일 확률이 높다.