인프런 커뮤니티 질문&답변

위 설정을 azure storage의 CORS 설정에 추가했고, App service에서도 CORS_ORIGIN_WHITELIST에 요청 도메인을 추가했더니 정상 동작합니다.

링크 주신 공식문서를 좀더 읽어보겠습니다. 감사합니다. :)

안녕하세요.

CORS는 서로 다른 호스트 간의 자원 접근을 기본적으로 제한하는 브라우저의 보안 기능입니다. 아래의 MDN 문서에도 설명이 나와있는 데요. Ajax API 요청, 웹폰트 요청 등이 CORS의 제한을 받게 됩니다.

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#%EC%96%B4%EB%96%A4_%EC%9A%94%EC%B2%AD%EC%9D%B4_cors%EB%A5%BC_%EC%82%AC%EC%9A%A9%ED%95%98%EB%82%98%EC%9A%94

보여주신 오류는 웹폰트 로딩에 대한 CORS 오류이구요. 요청을 받는 측에서 CORS 설정을 해주어 이를 해결할 수 있습니다. 현재는 Azure Storage 에 세팅을 해줘야 할테구요. 리액트/장고 간의 리액트로부터 장고로의 API 요청에서는 장고 측에 CORS 설정이 필요합니다.

아래의 공식문서를 참고해보실 수 있구요. 본 공식문서를 꼭 차근차근 읽어보세요.

https://docs.microsoft.com/ko-kr/rest/api/storageservices/Cross-Origin-Resource-Sharing--CORS--Support-for-the-Azure-Storage-Services?redirectedfrom=MSDN#enabling-cors-for-azure-storage

위 공식문서에서 언급된 Cors Rule 설정은 아래의 XML과 같습니다.

위 설정을 Storage account의 Resource sharing (CORS) 설정에 추가해주시면 되구요. Allowed origins 항목에는 현재 장고 웹페이지의 주소를 추가해주시면 됩니다.

화이팅입니다. :-)