다음을 통해 공유

Microsoft Entra 애플리케이션 프록시 CORS(원본 간 리소스 공유) 문제 이해 및 해결

  • 아티클

CORS(원본 간 리소스 공유) Microsoft Entra 애플리케이션 프록시를 통해 게시하는 앱 및 API에 대한 과제를 제시할 수 있습니다. 이 문서에서는 Microsoft Entra 애플리케이션 프록시 CORS 문제 및 해결 방법을 설명합니다.

팁

비동기 JavaScript 및 eXtensible 태그 언어(AJAX)라고 합니다. AJAX는 XML(eXtensible Markup Language)이 AJAX의 마지막 X 구성하는 약어 내에 약어를 포함합니다. AJAX는 비동기 JavaScript를 의미하며 XML과 XML은 eXtensible Markup Language를 의미합니다.

브라우저 보안은 일반적으로 웹 페이지가 다른 도메인에 대한 요청을 하지 못하게 합니다. 이 제한은 동일 원본 정책호출되며 악의적인 사이트가 다른 사이트에서 중요한 데이터를 읽지 못하게 합니다. 그러나 경우에 따라 다른 사이트에서 웹 API를 호출하도록 할 수 있습니다. CORS는 서버가 동일한 원본 정책을 완화하고 일부 원본 간 요청을 허용하면서 다른 요청을 거부할 수 있도록 하는 W3C 표준입니다.

CORS 문제 이해 및 식별

두 URL의 원본은 동일한 체계, 호스트 및 포트(RFC(Request for Comments) 6454)가 있는 경우 다음과 같습니다.

  • http://contoso.com/foo.html
  • http://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 문제를 식별할 수 있습니다.

  1. 브라우저를 시작하고 웹앱을 찾습니다.
  2. F12 눌러 디버그 콘솔을 표시합니다.
  3. 트랜잭션을 재현하고 콘솔 메시지를 검토합니다. CORS 위반으로 원본에 대한 콘솔 오류가 발생합니다.

다음 스크린샷에서 사용해 보기 단추를 선택하면 Access-Control-Allow-Origin 헤더에서 https://corswebclient-contoso.msappproxy.net 찾을 수 없다는 CORS 오류 메시지가 발생했습니다.

CORS 문제

애플리케이션 프록시를 사용하는 CORS 문제

다음 예제에서는 일반적인 Microsoft Entra 애플리케이션 프록시 CORS 시나리오를 보여 줍니다. 내부 서버는 CORSWebService web API 컨트롤러 및 CORSWebService호출하는 CORSWebClient 호스트합니다. CORSWebClientCORSWebService대한 AJAX(비동기 JavaScript 및 XML) 요청이 있습니다.

온프레미스 동일 원본 요청

CORSWebClient 앱은 온-프레미스에서 호스트할 때 작동하지만 Microsoft Entra 애플리케이션 프록시를 통해 게시할 때 로드되지 않거나 오류가 발생합니다. CORSWebClient 앱과 CORSWebService 앱을 애플리케이션 프록시를 통해 서로 다른 앱으로 각각 게시한 경우, 두 앱은 서로 다른 도메인에서 호스팅됩니다. AJAX 요청이 CORSWebClient에서 CORSWebService로 보내진 교차 출처 요청이며, 이 요청은 실패합니다.

애플리케이션 프록시 CORS 요청

애플리케이션 프록시 CORS 문제에 대한 솔루션

여러 가지 방법 중 하나로 이전 CORS 문제를 해결할 수 있습니다.

옵션 1: 사용자 지정 도메인 설정

Microsoft Entra 애플리케이션 프록시 사용자 지정 도메인 사용하여 앱 원본, 코드 또는 헤더를 변경하지 않고도 동일한 원본에서 게시할 수 있습니다.

옵션 2: 부모 디렉터리 게시

두 앱의 부모 디렉터리를 게시합니다. 이 솔루션은 웹 서버에 앱이 두 개만 있는 경우 특히 잘 작동합니다. 각 앱을 별도로 게시하는 대신 공통 부모 디렉터리를 게시하여 동일한 원본을 만들 수 있습니다.

예제에서는 CORSWebClient 앱에 대한 Microsoft Entra 애플리케이션 프록시 페이지를 보여 줍니다. 내부 URL이 contoso.com/CORSWebClient로 설정되면, 교차 출처 문제로 인해 앱이 contoso.com/CORSWebService 디렉터리에 대해 성공적으로 요청을 수행할 수 없습니다.

개별적으로 앱 게시

대신 내부 URL 설정하여 CORSWebClient 및 CORSWebService 디렉터리를 모두 포함하는 부모 디렉터리를 게시합니다.

부모 디렉터리 게시

결과 앱 URL은 CORS 문제를 효과적으로 해결합니다.

  • https://corswebclient-contoso.msappproxy.net/CORSWebService
  • https://corswebclient-contoso.msappproxy.net/CORSWebClient

옵션 3: HTTP 헤더 업데이트

원본 요청과 일치하려면 웹 서비스에 사용자 지정 HTTP 응답 헤더를 추가합니다. IIS(인터넷 정보 서비스)에서 실행되는 웹 사이트에서 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 애플리케이션 프록시복잡한 애플리케이션 이해를 참조하세요.

또한 참조하세요