How do I handle (not fix!) a CORS exception in Ionic Framework?

user_741136 0
Viewed 347

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.

ionic-framework angular iis
5 Answers

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.

user_79514380

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

user_171326100

"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.

user_3164590

My suggestion is to use an interceptor. If you detect an error code of 503 or any other error code, you can redirect the user to your app_offlane.htm page. It should look something like this:

export class AppInterceptor implements HttpInterceptor {

constructor(private router: Router) {}

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

return next.handle(request).pipe(tap(() => { },
            (err: any) => {
                if (err instanceof HttpErrorResponse) {

                    // HttpStatus.SERVICE_UNAVAILABLE = 503

                    if (err.status === HttpStatus.SERVICE_UNAVAILABLE){
                        this.router.navigate([`app_offline.htm`]);
                    } else {
                        return;
                    }
                }
            }));
   }
}
user_159477680

Cors is not an ionic's rule, cors is a server rule whose allow or deny requests, this is a good behaviour.

You must add rules to your iis where allow or deny request based on origins,

In your server appication you should add to response headers cors instructions such as:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*"/>
      <add name="Access-Control-Allow-Headers" value="Content-Type"/>
      <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS"/>
    </customHeaders>
  </httpProtocol>
</system.webServer>

Check out your server application headers, pay attention on Access-Control-Allow-Origin if * wild card not work, try add ionic origin maybe http://localhost:8100

user_54904360
Related