Toon posts:

[ASP.Net Core/Angular] CORS blokkeert API call

Pagina: 1
Acties:

Vraag


Acties:
  • 0Henk 'm!

  • Sircuri
  • Registratie: Oktober 2001
  • Niet online

Sircuri

Volledig Appelig

Topicstarter
TL;DR> Ondanks dat een OPTIONS preflighted request naar de server correct de Access-Control-Allow-* headers teruggeeft, geeft de browser toch een "No 'Access-Control-Allow-Origin' header is present on the requested resource." error.

De situatie is als volgt:
1. Gebruik een NGINX reverse proxy om het verkeer van buiten door te leiden naar mijn docker host
2. Heb een docker draaien met een ASP.NET Core applicatie (bereikbaar op api.fictiefdomein.nl) en de volgende CORS setup:

code:
1
2
3
4
5
6
7
8
9
            services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy", builder => builder
                    .WithOrigins("https://fictiefdomein.nl",
                                 "https://www.fictiefdomein.nl")
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .AllowCredentials());
            });


3. Heb een docker Angular app draaien op domein 'fictiefdomein.nl', welke een uitstapje moet maken naar 'https://api.fictiefdomein.nl/api/identity/authenticate' om een gebruiker in te loggen.

Ik zie dat de browser netjes een preflighted request doet naar de server middels een HTTP OPTIONS request:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
OPTIONS /api/identity/authenticate HTTP/1.1
Host: api.fictiefdomein.nl
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: https://fictiefdomein.nl
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://fictiefdomein.nl/
Accept-Encoding: gzip, deflate, br
Accept-Language: nl-NL,nl;q=0.9,en-US;q=0.8,en;q=0.7


Met bijbehorende response van de server:
code:
1
2
3
4
5
6
7
8
9
HTTP/1.1 204 No Content
Server: nginx/1.10.3
Date: Sun, 24 May 2020 10:43:52 GMT
Connection: keep-alive
Vary: Origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: POST
Access-Control-Allow-Origin: https://fictiefdomein.nl


Toch geeft het POST request wat volgt een error in de console van Chrome:

code:
1
2
3
4
5
6
7
POST https://api.ficteifdomein.nl/api/identity/authenticate 400 (Bad Request)
... removed lots of angular packages stack trace ...
Show 65 more frames
/#/pages/login?returnUrl=%2Fdashboard:1 Access to XMLHttpRequest at 
'https://api.fictiefdomein.nl/api/identity/authenticate' from origin 'https://fictiefdomein.nl' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
on the requested resource.


Zover ik weet heb ik me ondertussen aardig goed ingelezen in CORS, het doel ervan en hoe het moet werken, maar toch krijg ik bovenstaande setup niet werkend. Ik zie iets over het hoofd, dus ik hoop dat iemand hier mij in een bepaalde richting kan duwen bij het zoeken naar de oplossing.

Weet niet of het relevant is voor het oplossen van het probleem, maar de reverse proxy draait op een Raspberry en de Docker host is een Ubuntu 18 server welke dus de Angular app docker (NGINX server) host en de ASP.NET Core API docker application.

Signature van nature

Beste antwoord (via Sircuri op 24-05-2020 14:01)


  • Mercatres
  • Registratie: September 2009
  • Laatst online: 12:29
Weet je zeker dat het CORS is dat moeilijk doet? Ik heb in het verleden ook wel gemerkt dat een HTTP 500 alsnog "fout" die CORS melding gaf. Geeft je API dat ook aan in de logs?

Alle reacties


Acties:
  • Beste antwoord
  • 0Henk 'm!

  • Mercatres
  • Registratie: September 2009
  • Laatst online: 12:29
Weet je zeker dat het CORS is dat moeilijk doet? Ik heb in het verleden ook wel gemerkt dat een HTTP 500 alsnog "fout" die CORS melding gaf. Geeft je API dat ook aan in de logs?

Acties:
  • 0Henk 'm!

  • Sircuri
  • Registratie: Oktober 2001
  • Niet online

Sircuri

Volledig Appelig

Topicstarter
Juist, goed punt. Dat ga ik nakijken inderdaad. Ik zal de logging zetten op TRACE in de ASP.NET applicatie om uit te sluiten dat het inderdaad niet de API zelf is die fouten geeft.

[Voor 87% gewijzigd door Sircuri op 24-05-2020 14:02]

Signature van nature


Acties:
  • +1Henk 'm!

  • Sircuri
  • Registratie: Oktober 2001
  • Niet online

Sircuri

Volledig Appelig

Topicstarter
Je zou eens gelijk kunnen hebben:

code:
1
Connection id "0HLVVQUV372L8" bad request data: "Requests with 'Connection: Upgrade' cannot have content in the request body."


Dit zit in mijn reverse proxy config als ik me goed kan herinneren. Even testen :)

Opgelost: Correct, de fout zat in mijn reverse proxy config. Het werkt nu! Ontzettend bedankt. Soms staar je jezelf zo blind, dat je niet eens meer verder kan kijken. Nu nog SignalR aan de praat krijgen via de reverse proxy (daarom zat die Connection "Upgrade" in de Nginx config).

[Voor 34% gewijzigd door Sircuri op 24-05-2020 14:02. Reden: Oplossing toegevoegd]

Signature van nature




Google Pixel 7 Sony WH-1000XM5 Apple iPhone 14 Samsung Galaxy Watch5, 44mm Sonic Frontiers Samsung Galaxy Z Fold4 Insta360 X3 Nintendo Switch Lite

Tweakers is samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer onderdeel van DPG Media B.V.
Alle rechten voorbehouden © 1998 - 2022 Hosting door True

Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee