개요
CORS(원본 간 리소스 공유) Microsoft Entra 애플리케이션 프록시를 통해 게시하는 앱 및 API에 대한 과제를 제시할 수 있습니다. 이 문서에서는 Microsoft Entra 애플리케이션 프록시 CORS 문제 및 해결 방법을 설명합니다.
브라우저 보안은 일반적으로 웹 페이지가 다른 도메인에 대한 요청을 하지 못하게 합니다. 이러한 제한 사항을 동일 원본 정책이라고 합니다. 이 정책은 악의적인 사이트가 다른 사이트에서 중요한 데이터를 읽는 것을 방지합니다. 그러나 경우에 따라 다른 사이트에서 웹 API를 호출하도록 할 수 있습니다. CORS는 일부 원본 간 요청을 허용하고 다른 요청을 거부하도록 서버에 지시하는 W3C 표준입니다.
CORS 문제 식별
두 URL은 이 예제와 같이 동일한 체계, 호스트 및 포트(RFC(주석 요청) 6454)가 있는 경우 동일한 원본을 갖습니다.
http://contoso.com/foo.htmlhttp://contoso.com/bar.html
이러한 URL의 원본은 이전 두 URL과 다릅니다.
-
http://contoso.net: 다른 도메인 -
http://contoso.com:9000/foo.html: 다른 포트 -
https://contoso.com/foo.html: 다른 체계 -
http://www.contoso.com/foo.html: 다른 하위 도메인
동일한 원본 정책은 앱이 올바른 액세스 제어 헤더를 사용하지 않는 한 다른 원본의 리소스에 액세스하는 것을 방지합니다. CORS 헤더가 없거나 올바르지 않으면 원본 간 요청이 실패합니다.
브라우저 디버그 도구를 사용하여 CORS 문제를 식별할 수 있습니다.
- 브라우저를 열고 웹앱으로 이동합니다.
- F12 키를 선택하여 DevTools에서 디버그 콘솔을 엽니다.
- 트랜잭션을 재현하고 콘솔 메시지를 검토합니다. CORS 위반으로 원본에 대한 콘솔 오류가 발생합니다.
다음 스크린샷에서 사용해 보기 단추를 선택하면 https://corswebclient-contoso.msappproxy.net 헤더에서 Access-Control-Allow-Origin 찾을 수 없다는 CORS 오류 메시지가 발생했습니다.
애플리케이션 프록시를 사용하는 CORS 문제
다음 예제에서는 일반적인 Microsoft Entra 애플리케이션 프록시 CORS 시나리오를 보여 줍니다. 내부 서버는 CORSWebService web API 컨트롤러 및 CORSWebService호출하는 CORSWebClient 호스트합니다. AJAX(비동기 JavaScript 및 XML) 요청은 CORSWebClient 에서 CORSWebService로 수행됩니다.
CORSWebClient 앱은 온-프레미스에서 작동하지만 Microsoft Entra 애플리케이션 프록시를 통해 게시될 때 실패하거나 오류를 표시합니다. CORSWebClient 및 CORSWebService가 별도의 앱으로 게시되는 경우 서로 다른 도메인에서 호스트됩니다. 다른 도메인에서 CORSWebClient가 CORSWebService로 교차 출처 AJAX 요청을 보내면, 이러한 요청은 실패하게 됩니다.
애플리케이션 프록시 CORS 문제에 대한 솔루션
이전 CORS 문제는 여러 가지 방법으로 해결할 수 있습니다.
옵션 1: 사용자 지정 도메인 설정
Microsoft Entra 애플리케이션 프록시 사용자 지정 도메인 을 사용하여 앱 원본, 코드 또는 헤더를 변경하지 않고 동일한 원본에서 게시합니다.
옵션 2: 부모 디렉터리 게시
두 앱의 부모 디렉터리를 게시합니다. 이 솔루션은 웹 서버에 앱이 두 개만 있는 경우 특히 잘 작동합니다. 각 앱을 별도로 게시하는 대신 공통 부모 디렉터리를 게시하여 동일한 원본을 만들 수 있습니다.
다음 예제에서는 CORSWebClient 앱에 대한 Microsoft Entra 애플리케이션 프록시 페이지를 보여 줍니다. 내부 URL이 contoso.com/CORSWebClient로 설정된 경우, 앱은 원본 간 문제로 인해 contoso.com/CORSWebService 디렉터리에 성공적으로 요청할 수 없습니다.
대신, 및 CORSWebClient 디렉터리를 포함하는 부모 디렉터리를 게시하도록 CORSWebService 값을 설정하세요.
결과 앱 URL은 CORS 문제를 효과적으로 해결합니다.
https://corswebclient-contoso.msappproxy.net/CORSWebServicehttps://corswebclient-contoso.msappproxy.net/CORSWebClient
옵션 3: HTTP 헤더 업데이트
원본 요청과 일치하려면 웹 서비스에 사용자 지정 HTTP 응답 헤더를 추가합니다. IIS(인터넷 정보 서비스)에서 실행되는 웹 사이트는 IIS 관리자를 사용하여 헤더를 수정합니다.
수정에는 코드 변경이 필요하지 않습니다. Fiddler 추적에서 확인할 수 있습니다.
**Post the Header Addition**\
HTTP/1.1 200 OK\
Cache-Control: no-cache\
Pragma: no-cache\
Content-Type: text/plain; charset=utf-8\
Expires: -1\
Vary: Accept-Encoding\
Server: Microsoft-IIS/8.5 Microsoft-HTTPAPI/2.0\
**Access-Control-Allow-Origin: https://corswebclient-contoso.msappproxy.net**\
X-AspNet-Version: 4.0.30319\
X-Powered-By: ASP.NET\
Content-Length: 17
옵션 4: 애플리케이션 수정
애플리케이션에 적절한 값으로 Access-Control-Allow-Origin 헤더를 추가하여 CORS를 지원하도록 변경할 수 있습니다. 헤더를 추가하는 방법은 애플리케이션의 코드 언어에 따라 달라집니다. 코드를 변경하려면 가장 많은 노력이 필요합니다.
옵션 5: 액세스 토큰의 수명 연장
일부 CORS 문제는 해결할 수 없습니다. 예를 들어 애플리케이션이 인증을 위해 login.microsoftonline.com 리디렉션되고 액세스 토큰이 만료됩니다. 그러면 CORS 호출이 실패합니다. 이 시나리오의 해결 방법은 액세스 토큰의 수명을 연장하여 사용자 세션 중에 만료되지 않도록 하는 것입니다. 자세한 내용은 Microsoft Entra ID 의구성 가능한 토큰 수명을 참조하세요.
옵션 6: 복잡한 애플리케이션
실행 전(OPTIONS) 요청이 사용되는 여러 개별 웹 애플리케이션을 포함하는 애플리케이션의 경우 복잡한 애플리케이션 기능을 사용하여 앱을 게시할 수 있습니다. 자세한 내용은 Microsoft Entra 애플리케이션 프록시복잡한 애플리케이션 이해를 참조하세요.
관련 콘텐츠
- 자습서: Microsoft Entra ID 애플리케이션 프록시를 통해 원격 액세스를 위한 온-프레미스 애플리케이션 추가
- Microsoft Entra 애플리케이션 프록시 배포 계획
- Microsoft Entra 애플리케이션 프록시 통해 온-프레미스 애플리케이션에 대한 원격 액세스