HEROJOON 블로그(히로블)

Vue3에서 AxiosError: Network Error 해결 본문

Frontend

Vue3에서 AxiosError: Network Error 해결

herojoon 2024. 3. 7. 22:53
반응형

오류 사항

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("*");
    }
}
반응형
Comments