Ionic View cannot reach our API

Ionic Framework ionic-v3
1

Hello!

Our app works perfectly fine when we ionic serve with Chrome’s CORS plugin, and it also works on android devices with development or release builds. Great!

Now we’re trying the Ionic View app to test it on iOS, as we don’t have a MacBook available. But it just can’t seem to reach our API! I can’t imagine it is a CORS issue because the API works for our live apps and on development builds and everything – just not in Ionic View. This is both for me and another developer in another country who is working from another system - but we are both using the new Ionic View app on an iPhone. We’ve been trying to debug it in several ways, checking our API log (only the OPTIONS request gets through), and track.js (which only says that the POST errors with status 0 and type 3), and restarting/reinstalling the Ionic View app,… to no avail.

Unfortunately we cannot test Ionic View on Android (the ‘legacy’ app), where it may be easier to debug, because I can’t create an account for some reason, and the other developer has one but can’t see the app appear.

Anyway, what might be wrong with those API requests?

2

Is the endpoint HTTPS?

3

Yes. The SSL certificates are generated by LetsEncrypt, and they work in all browsers and our current live apps. Does the Ionic View app use non-standard certificates? Is there a way around it?

4

I have now tried with the same API on http: (instead of https:), unfortunately resulting in the same issue.

5

I was eventually able to solve the issue. Turns out the API was sending correct CORS headers, but not enough: it needed one more, a very specific Access-Control-Allow-Headers, where * did not suffice but I had to return the HTTP_ACCESS_CONTROL_REQUEST_HEADERS request header there.

1 Like
6

How did you resolve this?

7

This is our full “CORS handling code” now, which allows our Ionic app to work from Ionic View, and also locally in-browser without any ‘cors plugin’:

// always this:
header("Access-Control-Allow-Origin: $_SERVER[HTTP_ORIGIN]");
// the following just for OPTIONS requests:
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    if (!empty($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
        header("Access-Control-Allow-Methods: $_SERVER[HTTP_ACCESS_CONTROL_REQUEST_METHOD]");
    }
    if (!empty($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) {
        header("Access-Control-Allow-Headers: $_SERVER[HTTP_ACCESS_CONTROL_REQUEST_HEADERS]");
    }
    exit; // OPTIONS requests only need the headers
}
1 Like
8

Thank you for your response. any idea how I do this in .Net ? Web API