27. CORS

 

이전에 미니프로젝트를 하던 도중에 cors error어쩌고  하는 문구를 본적이 있다. 그때는 일단 프로젝트를 빨리 끝내야 해서 간단하게 해결법만 찾아서 코드몇줄 추가해서 해결하고 말았던 기억이 있는데 앞으로도 자주 마주할 에러일 것 같아서 미리 공부해두고 원인이 무엇인지 근본적인 해결책은 무엇인지 등 자세히 살펴보려한다.

 

---

 

CORS?

무서운 빨간색

 도메인이나 서브도메인, 프로토콜, 포트가 다른 곳에 요청을 보내는 것을 Cross-Origin Request 라고 하고 이러한 Cross-Origin 요청을 보내려면 리모트 오리진에서 전송받은 븍별한 헤더가 필요한데 이런 정책을 Cross-Origin Resource Sharing, 줄여서 CORS라고 한다. 한마디로 브라우저 보안 정책이라고 할 수 있겠다. 따라서 브라우저를 켰는데 콘솔에 위와같이 어쩌고저쩌고 CORS disabled 같이 뜬다면 CORS 설정이 제대로 되어 있지 않구나~ 하고 고치러 가면된다.

 

CORS 에러는 왜 발생할까?

 

 위에서 Cross-Origin 요청에 대해 간략히 설명했다. CORS에러는 브라우저에서 서로 다른 도메인이나 포트로 서버의 요청을 보낼 때 브라우저 단에서 발생하는 에러이다. 이는 보안적인 측면에서 위험할 수 있다고 경고해주는 에러로 브라우저에서 발생하므로 프론트서버와 백엔서버간의 요청이 잘못된 경우에는 CORS에러가 따로 뜨진 않는다. 

 

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

 그렇다면 서로 다른 요청이란 무슨뜻일까? 기본적으로 웹에서 다른 출처로 리소스를 요처앟ㄹ 때는 HTTP 프로토콜을 사용해서 요청을 보내게 되는데 이 때 브라우저는 origin 이라는 필드에 요청을 보내는 출처를 담아서 보낸다. 이후 서버가 이 요청에 대한 응답을 할 때 응답헤더 Access_Control_Allow_Origin 이라는 값에 이 리소스에 접근하는 것이 허용된 출처를 같이 보내주고, 응답을 받은 브라우저는 자신이 보낸 Origin 과 서버가 보낸준 응답의 Access-Control_Allow-Origin 을 비교한 후 이 응답이 유효한지를 판별한다. 때문에 이때 이 두 응답이 다르다면 (즉, 출처가 다르다면) CORS 에러를 내보내게 된다.

 

해결방법

 

• Access_Control-Allow_Origin response 헤더 추가

가장 기본적이고 직관적인 방법으로는 모든 클라이언트 요청에 대한 cross-origin HTTP 요청을 허가해주는 헤더를 추가해주는 것이다.( useguard처럼) 하지만 이같은 방법은 수많은 API 에 대해서 일일히 적어줘야하기 때문에 사실상 많이 쓰이는 방법은 아니다.

 

• node.js의 미들웨어 CORS 추가

 그냥 간단하게 cors 에러를 해결해주는 모듈을 다운받아서 사용하는 방법이 있다.

npm install --save cors
yarn add cors

 물론 이같이 설정하면 모든 요청에 대해 허가를 하게 되므로 보안적으로는 좀 취약한 부분이 있을 수 있지만 이 역시 설정을 통해 보완해줄 수 있다고 하는데 내 프로젝트에는 일단 기본적인 방법만 적용해서 사용해보았다. 추후에 https://www.npmjs.com/package/cors 에서 좀더 자세히 적용해 봐야지!

 

출처 : https://velog.io/@jh100m1/CORS-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%AD%94%EB%8D%B0-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%95%B4%EA%B2%B0%ED%95%98%EB%8A%94%EA%B1%B4%EB%8D%B0 

CORS 가 뭔데 CORS 에러 어떻게 해결하는건데