CORS란? : 다른 Origin으로 요청을 보내기 위해 지켜야 하는 정책

1. CORS가 뭐야?Permalink

• 가령 내가 네이버에서 서비스를 이용 중인데, 뭔가 서비스를 요청할 때 데이터가 네이버로 가야되잖아. 근데, 내 소중한 데이터가 다음으로 가버리면 안되니까. 그래서 CORS 정책을 적용하는 것이지. 웹 상에서 CORS 정책은 최소한의 보안 정책임을 알아두자.
• 쉽게 말해서, CORS 정책은 요청을 하는 클라이언트 측과 요청을 받는 서버 측의 출처 정보가 일치해야 한다는 정책이다.

2. CORS ERROR가 발생하는 이유는?Permalink

• 클라이언트와 서버의 출처 정보가 일치해야 하는데, 에러가 발생하는 이유는 일치하지 않기 때문이죠.
• 일치해야하는 출처 정보는 기본적으로 http URL 정보에요.

https://rlaghdcjf12.github.io/user/users?userName=pyeongbee

• https:// : 프로토콜
• rlaghdcjf12.github.io : 호스트
• /user/users : 패스 (Path)
• ?userName=pyeongbee : 쿼리 (Query String)

3. CORS ERROR가 발생하지 않으려면?Permalink

• 위에서 다룬 출처 정보가 클라이언트와 서버에서 일치해야 해요.
• 위의 출처 정보 예시에는 포함되어 있지 않은데, 출처 정보에 포트 번호가 명시되어 있다면, 포트 번호도 일치해야 해요.
• 같은 출처와 다른 출처는 아래와 같이 알 수 있어요. (기준 출처 : https://rlaghdcjf12.github.io)

• 출처 정보만 일치해야하는 것이 아니라, 헤더에도 추가되는 정보가 있을 수 있다. 아래의 경우 에러가 발생할 수 있다.

수정된 헤더 : Content-Type, Origin, Accept, Authorization, Content-Length, X-Requested-With, X-Correlation-Id, X-Language-Code
기존 헤더 : Content-Type, Origin, Accept, Authorization, Content-Length, X-Requested-With

4. 발생했던 문제들Permalink

1. 모킹 서버를 사용하기 위해 mockoon을 이용했는데, CORS ERROR가 발생했었다. 출처 정보를 동일하게 맞춰주고, 추가한 헤더 또한 맞춰줘서 해결했다.
2. AWS 서버를 연동하는 서비스를 개발했었는데, AWS CORS ERROR가 발생했었다. API Gateway에서 해당 경로의 api를 선택하면 CORS가 있는데, 여기에서 Access-Control-Allow-Origin : * 로 설정하여 해결했다.