Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
Overzicht
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.
Browserbeveiliging voorkomt meestal dat een webpagina aanvragen naar een ander domein verzendt. Deze beperking wordt het same-origin policy genoemd. Het beleid voorkomt dat een schadelijke 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 wordt omgestuurd om bepaalde aanvragen voor meerdere origins toe te staan en andere aanvragen af te wijzen.
Een CORS-probleem identificeren
Twee URL's hebben dezelfde oorsprong als ze identieke schema's, hosts en poorten hebben (RFC (Request For Comments) 6454, zoals in dit voorbeeld:
http://contoso.com/foo.htmlhttp://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: Verschillend 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:
- Open de browser en ga naar de web-app.
- Selecteer de F12-sleutel om de console voor foutopsporing te openen in DevTools.
- 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-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 wordt een Asynchrone JavaScript- en XML-aanvraag (AJAX) gedaan van CORSWebClient naar CORSWebService.
De CORSWebClient-app werkt on-premises, maar mislukt of geeft een fout weer wanneer deze wordt gepubliceerd via de Microsoft Entra-toepassingsproxy. Als CORSWebClient en CORSWebService worden gepubliceerd als afzonderlijke apps, worden ze gehost op verschillende domeinen. De verschillende domeinen maken AJAX-aanvragen van CORSWebClient naar CORSWebService cross-origin, waardoor ze mislukken.
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 aangepast domein om te publiceren vanaf dezelfde oorsprong, zonder wijzigingen aan te brengen in app-origins, code of 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 volgende voorbeelden ziet u de Microsoft Entra-toepassingsproxypagina's voor de CORSWebClient-toepassing. Wanneer de interne URL is ingesteld op contoso.com/CORSWebClient, kan de app geen geslaagde aanvragen naar de contoso.com/CORSWebService map indienen, omdat deze cross-origin zijn.
Stel in plaats daarvan de waarde voor de interne URL in om de bovenliggende map te publiceren, die zowel de map CORSWebClient als de map CORSWebService bevat.
Met de resulterende APP-URL's wordt het CORS-probleem effectief opgelost:
https://corswebclient-contoso.msappproxy.net/CORSWebServicehttps://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.
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 toe te voegen, met de Access-Control-Allow-Origin 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 meerdere afzonderlijke webtoepassingen bevatten waarin voorbereidende (OPTIONS) aanvragen worden gebruikt, kunt u de apps publiceren met behulp van de complexe toepassingsfunctie. Zie Complexe toepassingen begrijpen in microsoft Entra-toepassingsproxyvoor meer informatie.