Delen via


Problemen met cross-origin resource sharing (CORS) van Microsoft Entra-toepassingsproxy begrijpen en oplossen

CORS - (Cross-Origin Resource Sharing) kan uitdagingen opleveren voor de apps en API's die u publiceert via de Microsoft Entra-toepassingsproxy. In dit artikel worden CORS-problemen en -oplossingen van Microsoft Entra-toepassingsproxy besproken.

Fooi

Asynchrone JavaScript- en eXtensible Markup Language wordt ajax genoemd. AJAX bevat een acroniem binnen een acroniem in dat XML (eXtensible Markup Language) bestaat uit de laatste X in AJAX. AJAX staat voor Asynchrone JavaScript en XML en XML staat voor eXtensible Markup Language.

Browserbeveiliging voorkomt meestal dat een webpagina aanvragen naar een ander domein verzendt. Deze beperking wordt het beleid voor dezelfde oorsprong genoemden voorkomt dat een kwaadwillende site gevoelige gegevens van een andere site leest. Soms wilt u echter mogelijk andere sites uw web-API laten aanroepen. CORS is een W3C-standaard waarmee een server hetzelfde origin-beleid kan versoepelen en sommige cross-origin-aanvragen toestaat terwijl anderen worden geweigerd.

CORS-problemen begrijpen en identificeren

Twee URL's hebben dezelfde oorsprong als ze identieke schema's, hosts en poorten hebben (Request For Comments (RFC) 6454), zoals:

  • http://contoso.com/foo.html
  • http://contoso.com/bar.html

Deze URL's hebben verschillende oorsprongen dan de vorige twee:

  • http://contoso.net - Ander domein
  • http://contoso.com:9000/foo.html - andere poort
  • https://contoso.com/foo.html - Ander schema
  • http://www.contoso.com/foo.html - Ander subdomein

Same-originbeleid voorkomt dat apps toegang krijgen tot bronnen van andere origins, tenzij ze de juiste headers voor toegangscontrole gebruiken. Als de CORS-headers afwezig of onjuist zijn, mislukken cross-origin-aanvragen.

U kunt CORS-problemen identificeren met behulp van hulpprogramma's voor foutopsporing in de browser:

  1. Start de browser en blader naar de web-app.
  2. Druk op F12- om de foutopsporingsconsole weer te geven.
  3. Probeer de transactie te reproduceren en bekijk het consolebericht. Een CORS-schending veroorzaakt een consolefout met betrekking tot de oorsprong.

In de volgende schermafbeelding veroorzaakte het selecteren van de knop Uitproberen een CORS-foutmelding dat https://corswebclient-contoso.msappproxy.net niet in de Access-Control-Allow-Origin header was gevonden.

CORS-probleem

CORS-uitdagingen met toepassingsproxy

In het volgende voorbeeld ziet u een typisch CORS-scenario voor de Microsoft Entra-toepassingsproxy. De interne server host een CORSWebService web-API-controller en een CORSWebClient- die CORSWebServiceaanroept. Er is een Asynchrone JavaScript- en XML-aanvraag (AJAX) van CORSWebClient- voor CORSWebService-.

op-locatie-aanvraag van dezelfde oorsprong

De CORSWebClient-app werkt wanneer u deze on-premises host, maar kan niet worden geladen of geeft fouten weer wanneer deze wordt gepubliceerd via de Microsoft Entra-toepassingsproxy. Als u de CORSWebClient en CORSWebService-apps afzonderlijk hebt gepubliceerd als verschillende apps via de toepassingsproxy, worden de twee apps gehost op verschillende domeinen. Een AJAX-aanvraag van CORSWebClient naar CORSWebService- is een cross-origin-aanvraag en mislukt.

CORS-aanvraag voor de toepassingsproxy

De oplossingen voor problemen met de toepassingsproxy en CORS

U kunt het voorgaande CORS-probleem op verschillende manieren oplossen.

Optie 1: Een aangepast domein instellen

Gebruik een Microsoft Entra-toepassingsproxy met een aangepast domein om vanaf dezelfde oorsprong te publiceren, zonder dat u wijzigingen hoeft aan te brengen in de oorsprong van de app, de code of de headers.

Optie 2: De bovenliggende map publiceren

Publiceer de bovenliggende map van beide apps. Deze oplossing werkt vooral goed als u slechts twee apps op de webserver hebt. In plaats van elke app afzonderlijk te publiceren, kunt u de gemeenschappelijke bovenliggende map publiceren, wat hetzelfde resultaat oplevert.

In de voorbeelden ziet u de Microsoft Entra-toepassingsproxypagina's voor de CORSWebClient-app. Wanneer de interne URL is ingesteld op contoso.com/CORSWebClient, kan de app geen geslaagde aanvragen indienen bij de contoso.com/CORSWebService directory, omdat deze cross-origin zijn.

App afzonderlijk publiceren

Stel in plaats daarvan de interne URL in om de hoofdmap te publiceren, die zowel de CORSWebClient als CORSWebService mappen bevat:

Bovenliggende map publiceren

Met de resulterende APP-URL's wordt het CORS-probleem effectief opgelost:

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

Optie 3: HTTP-headers bijwerken

Als u de oorspronkelijke aanvraag wilt vergelijken, voegt u een aangepaste HTTP-antwoordheader toe aan de webservice. Websites die worden uitgevoerd in Internet Information Services (IIS), gebruiken IIS Manager om de header te wijzigen.

Aangepaste antwoordheader toevoegen in IIS Manager-

Voor de wijziging zijn geen codewijzigingen vereist. U kunt deze controleren in een Fiddler-trace.

**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

Optie 4: De toepassing wijzigen

U kunt uw toepassing wijzigen om CORS te ondersteunen door de header Access-Control-Allow-Origin toe te voegen, met de juiste waarden. De manier om de header toe te voegen, is afhankelijk van de codetaal van de toepassing. Voor het wijzigen van de code is de meeste inspanning vereist.

Optie 5: de levensduur van het toegangstoken verlengen

Sommige CORS-problemen kunnen niet worden opgelost. Uw toepassing wordt bijvoorbeeld omgeleid naar login.microsoftonline.com om te verifiëren en het toegangstoken verloopt. De CORS-aanroep mislukt. Een tijdelijke oplossing voor dit scenario is het verlengen van de levensduur van het toegangstoken om te voorkomen dat het verloopt tijdens de sessie van een gebruiker. Zie Configureerbare levensduur van tokens in Microsoft Entra IDvoor meer informatie.

Optie 6: Complexe toepassing

Voor toepassingen die bestaan uit meerdere afzonderlijke webtoepassingen waarin voorbereidende aanvragen (OPTIONS) worden gebruikt, kunt u ze publiceren met behulp van de complexe toepassingsfunctie. Zie Complexe toepassingen begrijpen in microsoft Entra-toepassingsproxyvoor meer informatie.

Zie ook