Preflight CORS requests with Basic Authentication in Angular 2

Question

I am building an Angular 2 app that needs to send a CORS (Cross-origin resource sharing) POST request with Basic Authentication (https://en.wikipedia.org/wiki/Basic_access_authentication) to the server.

I am nicely setting the Authorization header for the POST request itself but as it is CORS, the browser first automatically sends the preflight OPTIONS request. Unfortunately the server is misconfigured (Why does the preflight OPTIONS request of an authenticated CORS request work in Chrome but not Firefox?) and requires the Basic Auth also in the preflight. It is a 3rd party server, I can't change it.

Is there a way to overcome it (e.g. add the Authorizion header to preflights, disable preflights, ...)?

Answer 1

The preflight request is made by the browser only to check if the CORS headers are set. If it doesn't get the required headers, there is nothing you can do. It will just not make the actual POST request.

What you actually can do, is to make the request from a server you control. Provide an API for your client to call your server and then make the call to the misconfigured server and forward the response to your browser client.