Local CORS Issues with Ionic 4 Application on mobile Device using Laravel as REST API

Question

I've already tried any kind of solutions posted in the world wide web.

1. Simple to reproduce, create a fresh Laravel Application and configure an API Route to receive get/post Requests.

2. Create an Ionic Application and send a get/post Request to the API.

3. Try it on Browser, set CORS as you need to, Browser will work after this.

4. Try it on a mobile device (ios, android), even after CORS configuration, it wont work.

   I've build a fresh Laravel Application with an api get/post route and also a fresh ionic application that uses HttpClient of angular and also tried to use the NativeHttp Plugin of Cordova. Now a simple get Request works without problems in the Browser (ionic serve). If I try to send a get/post Request on a mobile device, I get "message": "Http failure response for http://127.0.0.1:8000/api/login: 0 Unknown Error" with the HTTPClient of Angular and Native Call error: {"status":-1,"error":"Could not connect to the server."} with the NativeHTTP Plugin.

I tried to set CORS in the Laravel API, I used barryvdh/laravel-cors, I tried to make my own CORS middleware, I've also tried another laravel Cors Package. Nothing helped on the Laravel side.

Then I've tried several Codes and Ionic Applications, to fix this problem. Included with Headers, without, simple requests, NativeHTTP cordova-plugin-advanced-http, Angular HTTP... nothing worked...

This example from the Ionic Doc is not working...

    import { HTTP } from '@ionic-native/http/ngx';

    constructor(private http: HTTP) {}

    ...

    this.http.get('http://ionic.io', {}, {})
      .then(data => {

        console.log(data.status);
        console.log(data.data); // data received by server
        console.log(data.headers);

      })
      .catch(error => {

        console.log(error.status);
        console.log(error.error); // error message as string
        console.log(error.headers);

      });

I'm getting "message": "Http failure response for (unknown url): -1 undefined", in Browser with HTTPClient of Angular it works well.

This also works on Browser:

    login(email: String, password: String) {

        return this.http.post('https://127.0.0.1:8000/api/login',
          {email: email, password: password}
        ).pipe(
          tap(api_token => {
            this.storage.setItem('api_token', api_token)
            .then(
              () => {
                console.log('Token Stored');
              },
              error => console.error('Error storing item', error)
            );
            this.api_token = api_token;
            this.isLoggedIn = true;
            return api_token;
          }),
        );
      }

On IOS and Android, I get:

"message": "Http failure response for http://127.0.0.1:8000/api/login: 0 Unknown Error"

I tried to use Ionic with and without Capacitor, I tried it with ionic run --devapp and also with ionic cordova run ios, with XCODE and so on.

The Communication between any Laravel API I do with an Ionic mobile App is just not working with Httprequests...

I followed the Cors installation steps of barryvdh package and the cors.php looks like this:

    'supportsCredentials' => false,
        'allowedOrigins' => ['*'],
        'allowedOriginsPatterns' => [],
        'allowedHeaders' => ['*'],
        'allowedMethods' => ['*'],
        'exposedHeaders' => [],
        'maxAge' => 0,

also did the $middleware step to make it global and used the terminal command php artisan vendor:publish -- provider="Barryvdh\Cors\ServiceProvider".

Browser is not working without CORS configurated, but when I install the package, Browser works well. Nothing changes with the native applications, they still won't work after CORS packaged installed...

full Errors:

    "headers": {
    [ng]     "normalizedNames": {},
    [ng]     "lazyUpdate": null,
    [ng]     "headers": {}
    [ng]   },
    [ng]   "status": 0,
    [ng]   "statusText": "Unknown Error",
    [ng]   "url": "http://127.0.0.1:8000/api/login",
    [ng]   "ok": false,
    [ng]   "name": "HttpErrorResponse",
    [ng]   "message": "Http failure response for         http://127.0.0.1:8000/api/login: 0 Unknown Error",
    [ng]   "error": {
    [ng]     "isTrusted": true
    [ng]   }
    [ng] }


    [console.log]: "Ionic Native: deviceready event fired after 374 ms"
    [ng] [console.log]: {
    [ng]   "headers": {
    [ng]     "normalizedNames": {},
    [ng]     "lazyUpdate": null,
    [ng]     "headers": {}
    [ng]   },
    [ng]   "status": -1,
    [ng]   "statusText": "Unknown Error",
    [ng]   "url": null,
    [ng]   "ok": false,
    [ng]   "name": "HttpErrorResponse",
    [ng]   "message": "Http failure response for (unknown url): -1         undefined",
    [ng]   "error": "Verbindung zum Server konnte nicht hergestellt werden."
    [ng] }

I know I've posted alot of information, but maybe not enough. Hope you understand my problem and maybe someone has this problem with Laravel API and Ionic mobile APP too.

Answer 1

solved the problem...

I didnt host the API, just ran it with php artisan serve with the localhost:8000 address.

My mobile devices couldnt connect to the local mac address, the emulator on the mac otherwise is able to connect to that address.

Therefore the mobile device responded: "message": "Http failure response for (unknown url): -1 .

Dont know how the unknown Error 0 happend, I will give it a try now with a hostaddress.

Thank you anyway.