문제점

1. 발생 시점

React → Express 서버로 회원가입(Signup) 또는 로그인(Login) 요청을 보낼 때 오류 발생

프론트엔드(React)에서 백엔드(Node/Express) API를 호출할 때 오류 발생

<aside> ❌

Access-Control-Allow-Origin error CORS policy error blocked by CORS policy

</aside>

1. 원인 분석

포트 불일치

• 클라이언트 origin: http://localhost:5173 (Vite)
• 서버 origin: http://localhost:4000 (Express)

Origin 불일치: 클라이언트(프론트엔드)와 서버(백엔드)가 프로토콜(Protocol), 호스트(Host), 포트(Port) 중 하나라도 다르면 브라우저는 이를 **다른 출처(Cross-Origin)**로 판단 ➡️ 포트 불일치로 브라우저의 **Same-Origin Policy (동일 출처 정책)**에 의해 요청이 차단 ➡️ CORS 발생

해결방법

<aside> ⭕

cors로 접근 허용

CORS 미들웨어 도입: 백엔드 서버에서 클라이언트의 교차 출처 요청을 허용하도록 설정

</aside>

✔️ React에서 Signup/Login API 보내기 시작 → 브라우저 콘솔에서 CORS 발생 → cors 설치 및 .use(cors()); 추가

npm install cors

import cors from "cors";
app.use(cors());
app.use(express.json());

✔️ Express 서버가 클라이언트로부터의 HTTP 요청에 Access-Control-Allow-Origin 헤더를 포함하여 응답하게 되며, 브라우저는 이 헤더를 확인하고 해당 교차 출처 요청을 허용하게 되어 문제가 해결