CORS 에러 이해하기

CORS에러

브라우저간의 데이터를 주고받는 과정에서, 도메인 이름이 서로 다른 사이트간에 api요청을 할 때, 공유를 설정하지 않았다면 CORS에러가 발생한다. -> 서버가 발생시키는 것이 아니고 브라우저가 발생시키는 것이다. 그러나 해결은 서버에서 해줘야한다. (그렇기 때문에 초보자가 어려워 하는 것이다.)

 

브라우저(1111포트) - 프론트서버(1111포트) - 백엔드서버(2222포트)

 

위와 같이 브라우저와 서버간 관계가 있을때, 브라우저에서 도메인/포트가 다른 백엔드 서버로 요청이 갔을때, 보안을 위해 자체적으로 요청이 차단된다. CORS는 브라우저에서 발생하는 것이기 때문에 프론트서버-백엔드서버간 요청은 포트가 다르더라도 에러가 나지 않는다. 때문에 이점을 이용해 CORS를 해결할 수 있고, 간편하게 미들웨어를 설치하여 해결하기도 한다.

 

nodecat 프런트 작성하기

프런트에서 서버의 API를 호출하면 어떻게 될까?

• routes/index.js와 views/main.html 작성

프런트에서 요청 보내기

localhost:4000에 접속하면 에러 발생

요청을 보내는 프런트(localhost:4000), 요청을 받는 서버(localhost:8002)가 다르면 에러 발생(서버에서 서버로 요청을 보낼때는 발생하지 않음)

• CORS: Cross-Origin Resource Sharing 문제
• POST 대신 OPTIONS 요청을 먼저 보내 서버가 도메인을 허용하는지 미리 체크

CORS 문제 해결 방법

Access-Control-Allow-Origin 응답 헤더를 넣어주어야 CORS 문제 해결 가능

• res.set 메서드로 직접 넣어주어도 되지만 패키지를 사용하는게 편리
• npm i cors
• v2 라우터에 적용
• credentials: true를 해야 프런트와 백엔드 간에 쿠키가 공유됨

 

CORS 적용 확인하기

 

http://localhost:4000에 접속하면 정상적으로 토큰이 발급됨

응답 헤더를 보면 Access-Control-Allow-Origin 헤더가 들어 있음

• *은 모든 도메인을 허용함을 의미

클라이언트 도메인 검사하기

클라이언트 환경에서는 비밀키가 노출됨

• 도메인까지 같이 검사해야 요청 인증 가능
• 호스트와 비밀키가 모두 일치할 때만 CORS를 허용
• 클라이언트의 도메인(req.get(‘origin’))과 등록된 호스트가 일치하는 지 찾음
• url.parse().host는 http같은 프로토콜을 떼어내기 위함
• cors의 인자로 origin을 주면 * 대신 주어진 도메인만 허용할 수 있음

 

유용한 미들웨어 패턴 알아보기

위의 미들웨어를 아래처럼 수정 가능

• 아래처럼 쓰면 미들웨어 위 아래로 임의의 코드를 추가할 수 있음
• 활용 가능

CORS 요청 보내기

localhost:4000에 접속

• 응답 헤더의 도메인 확인

 

프록시 서버

CORS 문제에 대한 또다른 해결책

• 서버-서버 간의 요청/응답에는 CORS 문제가 발생하지 않는 것을 활용
• 직접 구현해도 되지만 http-proxy-middleware같은 패키지로 손쉽게 연동 가능