CORS는 Cross Origin Resource Sharing의 약자로 클라이언트 애플리케이션과 다른 origin을 가진 서버 애플리케이션이 서로 통신할 수 있도록 허용하는 프로토콜입니다.
다른 origin이란 예를 들어 클라이언트 애플리케이션은 www.mysite.com 으로 올라가 있는 반면 서버 애플리케이션은 www.serverapi.com 으로 올라가 있다고 했을 때 클라이언트와 서버 애플리케이션은 다른 origin을 가졌다고 말합니다.
CORS는 왜 필요한 걸까요? 클라이언트와 서버의 origin이 다른 경우가 더 많을텐데요?
사실 클라이언트와 서버는 같은 origin을 가진 경우에만 서로 통신을 할 수 있습니다. 이를 Same Origin Policy 라고도 하는데요.
그 이유는 클라이언트와 서버의 origin이 달라도 통신을 무조건 허용하면 클라이언트에서 악의적으로 서버에 접근할 가능성이 너무 높기 때문입니다.
한마디로 보안을 위해서 같은 origin일 때만 통신을 할 수 있는 것이죠.
그래서 같은 origin을 가진 경우에만 통신을 허용하여 웹 브라우저에서는 다른 origin을 가진 서버에 API를 호출할려고 하면 요청 자체를 막아버립니다.
그런데 앞서 얘기했듯이 클라이언트와 서버가 같은 origin을 가진 경우는 그렇게 많지 않습니다.
여러가지 이유가 있지만 그 중 프로젝트에서 클라이언트의 크기가 커지면서
클라이언트는 클라이언트데로 별도로 관리하기 위해 별도의 origin을 가지게 되었고
서버는 서버데로 origin을 가지게 된 경우가 그렇습니다.
물론 보안적인 이슈로 인해 클라이언트와 서버 애플리케이션을 다른 origin에 넣는 경우도 많습니다.
유저에게는 서버에 직접적으로 접근할 수 있는 모든 방향을 차단하는 것이 좋으니까요.
그래서 CORS가 필요한 것입니다. 서로 다른 origin에서도 통신이 가능해야하는 상황이 온 것이죠.
사실 CORS 관련 에러의 경우 클라이언트에서 해결할 방법은 없고 서버에서 별도의 설정을 해줘야 합니다.
서버에 요청하는 것 중 A, B origin만 서버에 접근하는 것을 허용하겠다 이런 식으로요.
Node.js의 Express를 사용해서 CORS를 설정하는 방법은 아래와 같습니다.
cors package는 미리 install를 해주셔야 합니다.
const cors = require(‘cors’);
app.use(cors({
origin: ‘https://www.mysite.com’,
methods: [‘GET’, ‘POST’, ‘DELETE’, ‘PUT’]
}));위 예시에서는 https://www.mysite.com으로 들어온 요청 중 method가 GET, POST, DELETE, PUT인 요청만 서버의 접근을 허용한다는 의미입니다.
다른 origin의 접근은 모두 거부하게 되므로 웹 브라우저에서 서버 API를 요청해도 에러가 발생하게 됩니다.
