Azure Functions – CORS 정책에 의해 액세스가 차단되었습니다.

이 모든 것은 Azure 함수로 과도한 엔지니어링을 시도함으로써 시작되었습니다. 그러면 작동하지 않습니다! 이 블로그 게시물은 나중에 필연적으로 동일한 CORS 문제가 발생했을 때 이 내용을 찾을 수 있도록 주로 저를 위한 것입니다.

whole Microsoft tutorial for JavaScript Azure Functions을 통과한 다음 Visual Code의 기본 제공 단위 테스트를 통해 Azure 함수를 로컬 및 원격으로 테스트했습니다. 애플리케이션의 JavaScript에서 함수를 호출하려고 했을 때 CORS 문제로 인해 갑자기 차단되었습니다.

코드

내 JavaScript에는 내 Azure 함수에 대한 매우 간단한 가져오기 호출이 있습니다.

fetch(`https://myfunction.azurewebsites.net/api/capturesubscribers?channelId=${channelId}`)

오류

이것을 호출하면 다음 오류가 발생했습니다.

Access to fetch at 'https://myfunction.azurewebsites.net/api/capturesubscribers?channelId=REDACTED' from origin 'http://dev.local' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

수정

나중에 몇 가지 Google 결과에서 다음 StackOverflow 질문을 찾았습니다. https://stackoverflow.com/questions/45332131/call-azure-function-from-javascript

여기의 대답은 이것이 포털에서 수행해야 하는 Azure 측의 CORS 구성임을 확인했습니다. Visual Code에서 내 Azure 함수를 마우스 오른쪽 단추로 클릭하고 포털에서 열기를 선택했습니다.



이것은 내 구독에서 올바른 기능에 대한 Azure Portal을 열었습니다. 왼쪽 창에서 API 섹션까지 아래로 스크롤하여 CORS를 선택했습니다.

허용된 출처를 입력할 수 있는 CORS 관리 패널이 로드됩니다.



여기에서 로컬 개발 URL을 추가할 수 있었고 모든 것이 작동했습니다! 만세!
당연히 나중에 스테이징 또는 프로덕션 호스팅 도메인도 추가해야 하지만 지금은 진행할 수 있습니다.