We have an Angular/Ionic app installed on iPhone and Android. The app calls an API on our IIS web server. When the server is up, everything works well.
However, while we are deploying a new version of the API website, we would like our app to show a maintenance page. Currently, during the deployment, we create an app_offline.htm file in the API site's root folder, which is the usual way of taking a website offline and showing a maintenance page in IIS.
Unfortunately, this means the CORS preflight request from our Ionic app also returns a 503 http error code; I guess that IIS takes the whole site down. We are unable to handle this 503 error in the Angular/Ionic app on the phone, since the preflight request is triggered by the browser. We add custom headers to each request, which cannot be avoided. The net result is that the maintenance page is not displayed when the API site is down.
Is there a way to show a maintenance page in our Ionic/Angular app while the API site is being deployed? Perhaps by configuring IIS to allow preflight requests even when app_offline.htm is in place, somehow handling the 503 on the Ionic side, or even stopping the preflight OPTIONS request from the Ionic app?
NOTE: I am NOT asking how to configure my site to solve a CORS issue, that part is already in place. I want to handle an expected CORS error when it occurs in the app while the supporting API site is being deployed.
For security reasons, specifics about what went wrong with a CORS request are not available to JavaScript code. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.
You can find out more here at developer.mozilla.org
My suggestion is to handle any request errors like any other, inside of a interceptor.
You can then make use of the properties on the error object (like a status of 0) to decide if you should check if you are in maintenance mode, or you can just always check the mode when you get any errors.
To do this you can check if the app_offline.htm page is currently up or not with a web request,
or you can make use of a separate API to determine if you are currently in maintenance mode or not.
Then take the appropriate actions based on that response.
maybe discuss among you about 2 sites/api approach. extra api to handle all requests (responds with the necessary headers and perhaps a maintenance message/status for the app to handle) when the real api is being updated.
following is an article about favoring 2 sites method. although the host is serving static content and not an api, similar pattern can be followed
https://www.vegait.rs/media-center/blog/offline-maintenance-mode-in-iis
"We are unable to handle this 503 error in the Angular/Ionic app on the phone, since the preflight request is triggered by the browser." How are you unable to handle errors ?
All http.get requests have try/catch routines you can use. If data is not received from server, fallback / navigate to another page, showing API server is down for maintenance.