[TIL] Cross Domain이란? CORS 이슈 해결

이번에 api를 개발했는데, 협업하는 FE 개발자분께서 cors 에러가 났다고 하셨다.

CORS (교차 출처 리소스 공유)

CORS는 자바스크립트 보안 정책 중 하나로, 교차 출처 리소스 공유(Cross-Origin Resource Sharing)라고 한다.
클라이언트(자바스크립트)가 서버와 통신할 때 서로 주소의 프로토콜, 호스트, 포트가 같아야한다는 것이다.

Acess-Control-Allow-Origin

모든 또는 지정된 요청 도메인의 URI로부터의 서버 리소스 접근을 허용하겠다는 옵션이다.

Acess-Control-Allow-Origin : * | <origin\>

Access-Control-Allow-Credentials

Request with Credential 방식이 사용될 수 있는지를 지정한다. Access-Control-Allow-Origin이 *이 아닌 origin이 지정된 값일 때 true가 적용된다.

Access-Control-Allow-Credentials: true | false

Access-Control-Request-Method

예비 요청에 대한 Response Header에 사용되며, 서버의 리소스에 접근할 수 있는 HTTP Method 방식을 지정한다.

Access-Control-Request-Method : <method>[, <method>]*

쉽게 말하면 FE개발자분이 테스트하신 도메인이 내가 개발한 api가 있는 도메인과 달라서 크로스도메인 이슈가 생겼고, api 헤더에 요청 온 도메인과의 통신을 허락하겠다는 옵션(Access-Control-Allow-Origin) 추가 작업으로 이슈를 해결하였다.