Vue Axios Error: Network Error, CORS, 404 에러 해결하기

Network Error (CORS blocked)

아래와 같은 오류가 떴다. 

 

오류만 안보이게 하기 위해서는 아래 작업을 수행하면 되는데, 오류에 대한 근본적인 해결방법은 아니다.

yourPromise()
  .then(result => {
    // 정상적인 처리 작업
  })
  .catch(error => {
    // 예외 처리 작업
    console.error(error);
  });

 

[Vue] CORS 에러 해결하기

 

 

위 블로그를 따라 CORS 에러를 해결해주니 아래와 같은 오류가 발생하였다. 

404 오류

User
Request failed with status code 404
AxiosError: Request failed with status code 404
    at settle (webpack-internal:///./node_modules/axios/lib/core/settle.js:24:12)
    at XMLHttpRequest.onloadend (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:121:66)

 

 

해결방법

해결은 블로그에서 보이던 방법 다 따라하고 나랑 맞지 않아 보이는 것 지우니 해결됐다. 근데 근본적인 원인이랑, 어떻게 해결했는지는 알지 못했다. 일단은 프로젝트가 급하니 원인 파악은 나중에 공부하면서 해보려고 한다.

 

1. Spring에서 class 하나 생성 

package com.example.demo;

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

@Configuration
public class WebConfig implements WebMvcConfigurer {
	
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**")
				.allowedOrigins("*")
				.allowedMethods("GET", "POST")
				.maxAge(3000);
		
//		addMapping - CORS를 적용할 url의 패턴을 정의 (/** 로 모든 패턴을 가능하게 함)
//		allowedOrigins - 허용할 origin을 정의 (* 로 모든 origin을 허용, 여러개도 지정가능)
//		allowedMethods - HTTP Method를 지정 (* 로 모든 Method를 허용)
//		maxAge - 원하는 시간만큼 request를 cashing함
	}
}

 

2. 인용한 블로그의 VUE config 지워주기

입력할 경우 axios 링크에서 앞에 localhost링크 지워야하는데, 그렇게 해도 연결이 안됐다.

 

3. 전체 경로 작성해주기

 

 

4. 결과가 출력됨.

 

아래 블로그의 자바 코드만 이용했다. 왜인지는 모르겠는데 아마 서버랑 연결하는게 아니어서 config를 하지 않아도 된걸지도..? 

[Vue] Spring boot 연동시 cors 에러 해결