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

[Sircuri]

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:

            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:

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:

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:

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.

[Mercatres]

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?

[Sircuri]

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 ]

[Sircuri]

Je zou eens gelijk kunnen hebben:

code:

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 ]