webpack-dev-server proxy설정으로 cors 정책 우회가 가능한 이유

안녕하세요! webpack-dev-server 자체가 내부적으로 express (node.js) 서버를 구동시키는 것으로 알고 있습니다. 이게 말씀하신 proxy 서버가 되는 것 같구요. 질문자님의 웹이 백엔드 서버로 요청하는 모든게 proxy 서버를 통해서 나가고, 백엔드에서 넘겨주는 응답도 proxy 서버를 통해서 들어올겁니다. CORS를 우회하려면 proxy 서버에서 header 값을 변경해주면 되는거겠죠. 흐름을 표현하자면: 1. 웹에서 백엔드로 요청하는 코드를 실행한다 (하지만, 설정값으로 인해 proxy 서버로 요청이 날라간다) 2. proxy 서버로 요청이 들어온다. (다른 작업을 할수도 있고 안할수도 있음) 요청을 백엔드로 보내준다. 3. 백엔드에서 요청을 처리하고 응답 헤더에 Access-Control-xxx 정보가 포함된 응답을 proxy 서버로 보낸다. 4. proxy 서버는 전달 받은 응답의 헤더 중 Access-Control-xxx 관련 정보를 수정한다. 5. proxy 서버가 수정된 응답을 웹으로 보내준다. 6. 브라우저는 응답의 헤더를 열어보고 CORS 설정이 잘 되어있다고 판단하고 정상 처리한다. 이렇게 될 것 같습니다. 아마 면접관분은 CORS가 어떻게 우회되는지/(작동하는지) 여쭤보시고자 하신 것 같네요. 브라우저에서 자주보는 빨간 CORS 관련 에러 문구는, 브라우저가 HTTP 응답의 헤더 정보를 처리한 결과라고 보시면 됩니다. CORS 관련 문서와 글들을 참고해보시면 좋을 것 같아요. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS https://ireadyoulearn.info/2021/12/16/bypass-browser-cors-using-a-proxy/ https://github.com/webpack/webpack-dev-server/blob/2b3b7e000f688e086c68ba821ed2edc3cd56a219/lib/Server.js

보다 정확한 이해를 위해서 저도 답변을 달아보아요. 로컬에서 개발을 위해 설정하는 webpack-dev-server의 proxy 설정은 Access-Control-xxx 류의 응답 헤더를 생성해주는 역할이 아니에요. 브라우저가 cross origin으로 request 하는 상황 자체를 없애주는 역할이에요. 즉 브라우저가 Ajax로 api를 호출할 때 백엔드 서버가 아닌 same origin으로 요청을 해도 webpack-dev-server가 요청을 백엔드서버로 proxy해주는 것으로 이해를 해야 해요. 관련 가이드 : https://joshua1988.github.io/webpack-guide/devtools/webpack-dev-server.html#%ED%94%84%EB%A1%9D%EC%8B%9C-proxy-%EC%84%A4%EC%A0%95 좀 더 정확한 이해를 위해서 실제 서비스의 아키텍처와 로컬환경에서 개발시에 아키텍처를 보면 다음과 같아요. 커리어리가 이미지 업로드가 안되서 아쉽군요. - 실제 서비스 시퀀스 다이어그램 이미지 링크 : https://mermaid.ink/img/pako:eNptklFr2zAUhf_KRU8Jqxf2akYgzvY4AvOrXxT7phGzJVeSl4xSaFgGhXZshabttnh00D2WdqWDPewfSfkPk-00bKx-MJbvp3POhbNLYpEg8YnCnQJ5jM8Y3ZY0izi4hxZa8CIbomzOOZWaxSynXEMAVEEgxUShhKdDCZ0uCMm2GQemoDWSgmvkiefGr1E-jkXWfkAkrFVo_MqhYU3-LzVsxv8qNVqB1-0-CkIfZBVfaWh1aM460-l0bRaEnkO8oCJULrhCmDA9hjHSZJO7F8eolNd3iaVIvV6aiok3qAP48MAijXTz5kIjOHSsQYzA-bQUzfA-vi3vwC7m5vDAXO-bb0voD16GYC8W9sc7e_YR7PlsdfrdlnMwN19sedTerOWUnpjbA4ilUGotV90wR_urxRLs5xN7e2XLc2dxbA5_1kZO9u3MXszs8nflZT58sl-PW71-bwCrs0vz_gTs_LKimrktf60Wd-2_t4k42SIZyoyyxJVit_obET3GDCPiu88ER7RIdUQivufQIk-oxucJ00ISf0RThVukak34hsfE17LAe2hdrA2F9aUXTfvqEu79AQ5wAJE - 로컬 환경에서의 시퀀스 다이어그램 이미지 링크 : https://mermaid.ink/img/pako:eNqVkjFP20AYhv_Kp5tSFTe7VUXC0LFCwkMXLxf7AlbtO_fuTIIQkoFQVTQDQwOhtSsqtepYUzF04BflLv-Bc3wpSG2HerL1ve_7Pa_8HaCQRQS5SJA3OaEh2YzxDsdpQME8OJeM5mmf8PY7w1zGYZxhKsEDLMDjbCgIh-d9Dt0eMB7vxBRiAZ2EhTjZZUI--dP6atNvzEPSz3D42onInmNC9v47x1vGeCaD0Mj_V0K_ndsVz0KWmqg2zHN6vaeGxgXe1BcSOl2cxd3RaGTXmWGj8Ywk42y0vxJav--YqWMTRMaoIBagsx6GRAhng1HJWeKsJwkbOltLrHldgL58O7-p1fEM9Puv-rqEATfKB07bQJd36ksJemw0U3U-0xe3oD-_U2cfQJ8cLU7KR5wNivcA8qiLZVK_Jqq60x9rfV00DLbLYlqCmhQmz-wp1c9xk95a5vWVrooVSzX7yz_T1a36URhIu2Rja9sHA6tvTvXlOejZ0eLim67GoOpP-rspPj3T1SSgaA2lhKc4jsz1HTQtAiR3SUoC5JrXiAxwnsgABfTQSPMswpK8iGLJOHIHOBFkDTXn6e_TELmS52Qlshf8W0WWppftmS-v_fAeb74q2Q

물어보시는 질문자분이 주목해야할부분은 cors의 정책보단 브라우저 안에서 처리한것과 브라우저 밖에서의 요청의 차이점에대해서 인지하시면 궁금증이 해소 되실것같습니다 기본적으로 cors라는것은 브라우저 안에서 구동하는 자바스크립트의 정책이구요 이것을 우회하기위해 브라우저 밖의 개발서버의 nodejs가 해당 요청을 대신하여 결과를 주는것입미다 이것을 리버스 프록시로 부르기도 합니다 짧은 지식이나마 도움이 되시길 바랍니다