[이슈모음] CORS 해결

SOP(동일 출처 정책, Same-Origin Policy) 정책을 위반하는 행동을 하게 되어 CORS 에러가 나타난 것이다. 

CORS 정책은 가져오는 리소스들이 안전한지 검사하는 브라우저의 방화벽이다. 리소스 요청에 의한 응답은 받았으나 브라우저가 이를 분석해 동일 출처하게 아니면 에러를 반환하는 것이다. 

 

결국 CORS 해결책은 서버의 허용이 필요하다. 응답헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달해야 한다. 허용할 출처를 기재하여 클라이언트에 응답하면 된다. 즉, 백엔드 개발자가 고쳐야 할 부분인 것이다.

 

 

 

사전지식 :

HTML [link, img] 태그에서 다른 사이트 리소스에 접근 가능 (Cross-Origin) => Same Origin Policy 무시 

[script, XMLHttpRequest, Fetch API] 는 다른 도메인에 대한 요청 제한 (Same-Origin)

=> jQuery 같은 외부 JS 소스를 가져와 로드할 수 있는 이유는, CDN 서비스 서버에서 모든 출처를 허용하도록 되어 있기 떄문. 

 

예비요청(Priflight) -> 

본 요청을 보내기 전 브라우저 스스로 안전한 요청인지 미리 확인 (GET, POST가 아닌 OPTIONS)