Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie
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: 25-11 17:26
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: 25-11 17:26
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



Apple iPhone 12 Microsoft Xbox Series X LG CX Google Pixel 5 Black Friday 2020 Samsung Galaxy S20 4G Sony PlayStation 5 Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2020 Hosting door True