Express :: cors_서버에서 CORS 에러 해결하기

프론트엔드 개발자라면, 자주 마주칠 CORS 에러. 

 

CORS 정책에 의해 블락되어, 응답헤더에 Access-Control-Allow-Origin이 없기 때문에 에러가 발생한다.

 

CORS는 일종의 보안정책이다.

해커가 마음대로 서버에 접근하지 못하도록,

다른도메인에서 접근하지 못하게 브라우저에서 미리 막아둔다.

즉 CORS에러는 다른도메인으로(3060에서 3065로)보낸 요청을 브라우저가 차단하기 때문에 생긴다.

 

브라우저에서 다른 도메인으로 보낼 때에만 생기는 문제이기 때문에,

프론트서버(3060)에서 백엔드서버(3065)로 보낼때는 문제가 안생긴다.

 

 

 

브라우저를 변조하면 cors에러가 안걸리지만...

용자의 브라우저를 변조할수없다^^(그건해킹이니까)

 

그러므로 다른 도메인으로(3060에서 3065로) 보낼 수 있도록 해결해줘야한다.

 

 

 

 

CORS 해결하는 방법으로는 두 가지가 있다.

 

1. 프록시방법

2. 백엔드서버에서 헤더를 만들어주는 방법

 

 

1. 프록시(proxy) 방법 :

브라우저에서 프론트로 요청을 보내고(같은 도메인이라서 요청됨), 프론트에서 백엔드로 요청을 보낸다.

응답도 백엔드에서 프론트로, 프론트에서 브라우저로 응답을 보낸다.

-이게 프록시방법.(proxy) .

 

 

2. 백엔드서버에서 헤더를 만들어줌.

에러를 읽어보면, 헤더에 Access-Control-Allow-Origin이 없는 것이 문제라고 뜬다.

 

  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3060');  

3060에서 온 요청을 허용하겠다. 

  res.setHeader('Access-Control-Allow-Origin', '*');  

모든 요청을 허용하겠다.

이런걸로 처리해도되지만, 미들웨어로도 처리할 수 있다.

 

 

---

 

cors라는 라이브러리를 설치하자.

 

app.js

모든요청을 허용한다. 

res.setHeader('Access-Control-Allow-Origin', '*');  와 같은 의미.

 

 

하지만 이렇게 작성하면 보안에 취약하다.

실무에서는 origin: '사이트주소' 이런식으로 작성한다.

 

 

 

개인프로젝트 중이므로 나중에 바꿔주고, 일단은 이 상태로 진행해보자.

입력한 대로 DB에 데이터가 성공적으로 들어갔다!!