CORS 에러 처리

상황

회원가입 페이지 생성 후 클라이언트/서버/데이터베이스 실행한 다음
회원가입 페이지에 접속하여 email, username, password 작성하고 Sign Up 하면 CORS 에러 발생

서버 실행

백그라운드에 DB 도커로 실행됨

클라이언트 실행, register page 접속

에러 메시지

Access to XMLHttpRequest at 'http://localhost:4000/api/auth/register' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

서버쪽에도 404에러 뜸
404 오류는 웹 서버가 요청된 리소스를 찾지 못했을 때 나타나는 HTTP 상태코드로, '페이지를 찾을 수 없음' 오류라고도 함
 

원인

프론트와 백엔드의 origin이 달라서 에러 발생
 

해결 방법

1. 백엔드에 cors 모듈 설치
2. server.ts에 '클라이언트에서 요청을 보내오는 origin' 등록

npm install cors --save
npm i --save-dev @types/cors

import cors from 'cors';

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

 
다시 서버 실행시켜주면

이메일, 유저네임, 패스워드 입력 후 회원가입하면 CORS에러 안뜨고

백엔드에 email 로그 뜨는 것을 볼 수 있음