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:
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:
Met bijbehorende response van de server:
Toch geeft het POST request wat volgt een error in de console van Chrome:
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.
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