Recent Posts
Recent Comments
HEROJOON 블로그(히로블)
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("*");
}
}
반응형
'Frontend' 카테고리의 다른 글
Vue3 Port 변경하는 방법 (2) | 2024.03.14 |
---|---|
Vue3 Component name "Button" should always be multi-word 에러 해결 (0) | 2024.03.08 |
Vue 3 프로젝트에 Router 설정하기 (0) | 2023.01.28 |
[Vue warn]: Avoid using non-primitive value as key, use string/number value instead. 에러 (0) | 2022.04.10 |
vue 프로젝트에서 API 호출하기 (Vue 버전 2) (0) | 2022.04.10 |
Comments