<div id="readability-page-1" class="page"><section><p>맨날맨날 봐도 맨날 맨날 헷갈리니까 정리. </p><h2>왜 웹에서 API 서버에 요청 안가는 거에요? 😭</h2><p>웹 개발 시에 자바스크립트로 야심차게 외부 서버 경로로 ajax 요청을 날리면 요청이 실패한다. </p><p>요청한 리소스, 즉 서버에서 내려준 응답에 <code>Access-Control-Allow-Origin</code> 이라는 헤더가 없단다. </p><p>아니 이게 뭔데.. 왜..안되는 거야..? 나는 행복하고 싶었는데.. 🤢</p><h2>너는 같은 도메인에만 요청을 보낼 수 있다 어리석은 웹이여.. SOP 정책</h2><p>이는 웹 어플리케이션 보안 모델에서 중요한 개념인 SOP (Same-Origin Policy) 때문이다. </p><p>이 정책은 자바스크립트(XMLHttpRequest) 즉 <code>&lt;script&gt;&lt;/script&gt;</code> 로 표기된 스크립트에서 생성되는 <strong>사이트 간 HTTP 요청</strong>은 불가능 하다는 것을 의미한다. </p><p>즉 Same-Origin만 가능하다는 것인데, 이때 Same-Origin은 <code>프로토콜</code> (e.g. http) , <code>호스트명</code>, <code>포트</code> 가 같다는 것을 의미한다. 프로토콜이 http일때는 80 포트를, https 를 쓰면 443 포트를 쓰니 포트까지 같아야한다.  </p><p><span>
      <span></span>
  <img alt="cors 078e554b 1b60 4de4 b5fd 96bd565d6134" title="cors 078e554b 1b60 4de4 b5fd 96bd565d6134" src="https://juneyr.dev/static/5065ff083701596f351885f803301038/7d769/cors-078e554b-1b60-4de4-b5fd-96bd565d6134.png" sizes="(max-width: 960px) 100vw, 960px" loading="lazy">
    </span></p><p>웹 보안을 위한 좋은 정책처럼 보이지만, 여러 도메인에 걸쳐서 구성되는 대규모 웹 프로젝트가 늘어나고, REST API를 통한 외부 호출이 늘어나는 상황에서는 귀찮은 정책이 될 수 밖에 없다. </p><p>그래서 추가로 정책을 만든 것이 CORS다. </p><h2>CORS는 씨오알에스라고 읽나요</h2><p>CORS(Cross-Origin Resource Sharing)은 말 그대로 다른 서버의 리소스를 사용할 수 있는 것을 의미한다. </p><p>만약 서버에서 내 웹을 허용만 해준다면, 접근이 가능하다.  </p><h2>그럼 서버에서 설정 가능한 것인가요</h2><p>CORS는 서버에서 설정을 해주어야한다.</p><p>하지만 CORS를 사용하지 않고 클라이언트에서도 SOP를 우회하는 방법이 있다.</p><ol><li><p>웹 브라우저 실행 시 외부 요청 허용 옵션</p><ul><li>SOP는 클라이언트인 웹 브라우저가 결정하는 것이므로, 이 과정을 살짝 넘어가면 된다.</li><li>크롬의 경우 커맨드라인 옵션으로 SOP 검사 동작을 무시할 수 있다.<code>—disable-web-security</code> 옵션을 추가하면 된다.</li><li>다만 고객이 내 페이지에 들어올 때마다 이 옵션을 사용해서 들어올 순 없으므로, 개발 시 CORS 설정이 되기 전 잠깐 사용하도록 하자.</li></ul></li><li><p>외부 요청을 가능하게 해주는 플러그인 설치. </p><ul><li>CORS는  <code>Access-Control-Allow-Origin</code> 헤더를 추가해주는 식으로 동작하므로, 서버의 응답을 가로채서 이 헤더를 추가해주는 플러그인이 있다.</li><li>크롬 웹스토어에서 CORS로 검색하자.</li><li>이 방법도 마찬가지로 일반 사용자는 사용할 수 없다.</li></ul></li></ol><h2>뭐야 결국 CORS 해줘야 해 ?</h2><p>Proxy 하는 방법도 있다. 내 웹을 설정한 서버에서 nginx proxy를 통해서 내 도메인에 요청을 하면,</p><p>해당 요청을 서버에 밀어 넣어주는 방법이다. 즉 나는 <code>[http://mydomain.com/api/users](http://mydomain.com/api/users)</code> 로 요청을 했지만, nginx가 proxy하여서 실제로 요청은 <code>[http://api.otherdomain.com/api/users](http://api.otherdomain.com/api/users)</code> 로 가도록 하는 것이다. 브라우저 상에서는 내 도메인에 요청을 하는 것이므로, SOP의 영향을 받지 않는다. </p><h2>CORS 설정을 해보자</h2><p>요청하려는 URL이 외부 도메인 (Same origin X) 일 경우 브라우저는 먼저 preflight 요청을 날리게 된다. </p><p>preflight 요청은 실제로 요청하는 경로와 같은 URL에 대해서 <strong>OPTIONS</strong> 메소드로 요청을 미리 날려보고 요청을 할 수 있는 권한이 있는 지 확인한다. </p><p><span>
      <span></span>
  <img alt="cors2 3d891103 45ca 4c32 8d49 4a7b38f88d5c" title="cors2 3d891103 45ca 4c32 8d49 4a7b38f88d5c" src="https://juneyr.dev/static/49da04f2608303bdb140828ae914cf2c/7d769/cors2-3d891103-45ca-4c32-8d49-4a7b38f88d5c.png" sizes="(max-width: 960px) 100vw, 960px" loading="lazy">
    </span></p><p>결국 CORS를 위해서는 사전에 클라이언트가 찔러보는 작업이 필요하다. </p><h3>서버에서는</h3><p>다음과 같은 요청 헤더를 줄 것인지 결정해야한다. </p><ul><li>Access-Control-Allow-Origin: 요청을 허용하는 출처. 위의 예제에서는 "<a href="http://yourdomain.com&quot;/">http://yourdomain.com"</a>.  출처를 상관하지않고 허용하는 경우 *</li><li>Access-Control-Allow-Credentials: 클라이언트 요청이 쿠키를 통해서 자격 증명을 해야하는 경우 true. 이 경우 클라이언트가 정해진 규격의 쿠키와 함께 요청을 보내야한다.</li><li>Access-Control-Allow-Methods: 요청을 허용하는 메소드. *일 경우 전부, 기본값은 GET, POST이다. preflight를 허용해야하므로 OPTIONS를 포함시킨다.</li></ul><p>나머지 값들은 많이 쓰이지 않으므로 나중에 정리하기로 한다. </p><p>Spring Boot 의 경우 </p><p><code>WebMvcConfigurer</code> 를 상속하는 <code>@Configuration</code> 클래스를 만들고, 다음 함수를 오버라이드한다. </p><p>더 이상 울지말자 CORS!</p><hr><p>참고</p><p><a href="https://brunch.co.kr/@adrenalinee31/1">https://brunch.co.kr/@adrenalinee31/1</a></p><p><a href="https://homoefficio.github.io/2015/07/21/Cross-Origin-Resource-Sharing/">https://homoefficio.github.io/2015/07/21/Cross-Origin-Resource-Sharing/</a></p></section></div>

Juneyr.dev RSS Feed

June Kim

맨날맨날 봐도 맨날 맨날 헷갈리니까 정리.  왜 웹에서 API 서버에 요청 안가는 거에요? 😭 웹 개발 시에 자바스크립트로 야심차게 외부 서버 경로로 ajax 요청을 날리면 요청이 실패한다.  요청한 리소스, 즉 서버에서 내려준 응답에  Access-Control-Allow-Origin…

CORS 맨날 봐도 모르겠어

댓글