[Axios] Axios Network Error & CORS 오류 해결

문제 상황

프론트에서 Axios 요청을 보냈을 때 다음과 같은 에러가 발생했다. 

AxiosError: Network Error

개발자 도구 콘솔에서는 추가로 아래 에러가 확인되었다.

Access to XMLHttpRequest at 'http://localhost:9999/category' 
from origin 'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present

 

원인 추론 — 서버 문제인가?

아예 백엔드 서버가 실행되지 않았을 때와 같이 보이는 오류였고, Network Error라는 메시지 때문에 다음과 같은 가능성을 우선적으로 의심했다.

• 서버가 실행되지 않음
• 포트 번호 불일치
• 잘못된 URL 요청

👉 그러나 서버는 정상 실행 중이고, http://localhost:9999 도 포스트맨이나, 브라우저로 잘 접속 되어 단순 네트워크 문제는 아니었다. 

 

원인 추론 — Axios 설정 문제?

개발자도구의 콘솔 에러에서 핵심 메시지를 발견했다.

No 'Access-Control-Allow-Origin' header is present

• 서버가 CORS 허용 헤더를 보내지 않음
• 브라우저가 요청 자체를 차단

Axios 설정을 점검했다.

const axiosInstance = axios.create({
  baseURL: "http://localhost:9999",
  timeout: 30000,
  withCredentials: true
});

withCredentials: true 이 옵션은 쿠키를 포함한 요청을 보내는 설정이며 CORS 정책이 더 엄격하게 적용된다.

→ 이 시점에서 “CORS 문제 가능성”을 의심했다.

 

Axios 문제가 아니라 브라우저 보안 정책에 의해 차단된 상황

 

최종 해결

npm install CORS

CORS 다운로드 후 

 

CORS 미들웨어 최상단에 추가하였다. 

const cors = require("cors");

app.use(cors({
  origin: "http://localhost:3000",
  credentials: true
}));

app.use(express.json());

app.use("/users", userRouter);
app.use("/books", bookRouter);
app.use("/category", categoryRouter);

 

 

• Network Error 해결
• CORS 에러 사라짐
• /category API 정상 응답 확인

 

알게 된 것 

• withCredentials: true 사용 시 CORS 설정은 반드시 구체적으로 해야 한다
• Express에서는 CORS 미들웨어를 라우터보다 먼저 등록해야 한다