Vue3에서 AxiosError: Network Error 해결

오류 사항

Vue3 프로젝트를 실행 시켰는데 잠시 후 아래 오류가 발생했습니다.

Uncaught runtime errors:
ERROR
Network Error
AxiosError: Network Error
    at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:160:14)
    at Axios.request (webpack-internal:///./node_modules/axios/lib/core/Axios.js:54:41)

 

환경

<Frontend>

• Node v20.11.1
• Vue3
• Vue3에 axios lib 사용 중

 

<Backend>

• Spring Boot 3
• Java 17

 

원인

axios로 호출 한 Backend API에 CORS 설정을 해주어야 합니다.

CORS란 호출하는 곳과 호출 받는 서비스의 서비스 도메인이 다를 경우 발생합니다.

 

해결

axios로 호출 한 Backend API에 CORS 설정을 해줍니다.

 

<방법1>

Backend 서비스의 Controller 코드 상단에 @CrossOrigin 를 붙여줍니다.

@CrossOrigin  // cors 어노테이션을 붙여주세요.
@RestController
public class TestController {
...
}

 

<방법2>

Cors Configuration 설정을 추가해줍니다.

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

/**
 * CORS 설정
 */
@Configuration
public class WebCorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*");
    }
}