Network Error (CORS error) 해결방법

오류메세지

Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:172:14)

 

위와같은 오류메세지. demo 폴더에 WebConfig.java에다가 아래 코드를 생성해줬다. 어떤 분 코드를 참고했는데, 워낙 이거저거 해보고 빼보고해서 누구였는지 기억안남,, 알려주시면 바로 출처 달게요. 그분은 다른 곳에 다른 것도 추가했는데, 나는 이것만 추가하니까 되더라. 오히려 다른거 추가하면 안된다.

 

java spring boot, Vue 사용중이다.

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", "PUT", "DELETE")
				.maxAge(3000);
		
//		addMapping - CORS를 적용할 url의 패턴을 정의 (/** 로 모든 패턴을 가능하게 함)
//		allowedOrigins - 허용할 origin을 정의 (* 로 모든 origin을 허용, 여러개도 지정가능)
//		allowedMethods - HTTP Method를 지정 (* 로 모든 Method를 허용)
//		maxAge - 원하는 시간만큼 request를 cashing함
	}
}

 

 

참고로 GPT는

1. Express.js를 사용하는 경우:

const express = require('express');
const app = express();

// CORS 설정
app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  next();
});

// 나머지 서버 로직
// ...

// 서버 시작
app.listen(8181, function() {
  console.log('서버가 8181 포트에서 실행 중입니다.');
});

 

 

 

Django를 사용하는 경우:

Django의 django-cors-headers 라이브러리를 사용하여 CORS 설정을 추가할 수 있습니다. 먼저 django-cors-headers를 설치하고, settings.py 파일에 다음과 같은 설정을 추가합니다:

INSTALLED_APPS = [
    # ...
    'corsheaders',
    # ...
]

MIDDLEWARE = [
    # ...
    'corsheaders.middleware.CorsMiddleware',
    # ...
]

CORS_ALLOWED_ORIGINS = [
    'http://localhost:8181',
    # 다른 허용할 도메인을 필요에 따라 추가할 수 있습니다.
]

위의 예시에서는 http://localhost:8181 도메인에서의 요청을 허용하도록 설정되어 있습니다. 필요에 따라 CORS_ALLOWED_ORIGINS에 허용할 도메인을 추가하십시오.

 

이라고 한다. Network Error 와 원만히 화해하길 바랍니다... 전 화해했어요.