Origin null is not allowed by Access-Control-Allow-Origin. IOS HTTP request

Ionic Framework Ionic Angular
1

Hi, I have recently upgraded my application from Ionic 3 to Ionic 4. I have successfully been able to recreate most of my application on the android version and it is working completely fine. but when I am testing the IOS version none of the API request calls that are made with custom headers are working correctly. for example this is an API request call I am making:

import {throwError as observableThrowError, Observable} from 'rxjs';

import {catchError, map} from 'rxjs/operators';
import {Component, ViewChild} from '@angular/core';
import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders, HttpRequest} from '@angular/common/http';
import {env} from '../env/env';
import {ToastController, IonApp, NavController} from '@ionic/angular';
import 'rxjs/add/operator/toPromise';
import {NavigationExtras} from '@angular/router';
import { Storage } from '@ionic/storage';

@Injectable()
export class ApiService {
  private userID: string;
  private userNotification: string;
  private userDetails: string;
  private userToken: string;
  constructor(
      public storage: Storage,
      private http: HttpClient,
      public toastCtrl: ToastController,
      public appCtrl: NavController,
      // public device: Device
  ) {

  }

 checkIfUserExists(mobile) {
    return this.http.get(`${env.baseApiUrl}/CheckUser/${mobile}`, {}).pipe(
        catchError(this.handleError)).toPromise();
  }

This is being implemented as so:

 this.loadingCtrl.create({
            message: 'Sending code ...'
        }).then((res) => {
            res.present();

            // Check if the user already exists
            this.ApiService.checkIfUserExists(this.user.mobile)
                .then( async (r: any) => {
                    res.dismiss();
                    // User exists. Prompt login
                    const alert = await this.alertCtrl.create({
                        header: 'Mobile Number Exists',
                        message: 'There is an account associated with the mobile number you\'ve entered. Navigate to Login?',
                        buttons: [
                            {
                                text: 'Cancel',
                                role: 'cancel',
                                handler: () => {
                                    console.log('Cancel clicked');
                                }
                            },
                            {
                                text: 'Ok',
                                handler: () => {
                                    const navigationExtras: NavigationExtras = {queryParams: {val: 'init'}};
                                    this.navCtrl.navigateRoot('/login', navigationExtras);
                                }
                            }
                        ]
                    });
                    alert.present();
                })
                .catch(e => {
                    // No User. Continue
                    this.origCode = Math.floor(1000 + Math.random() * 9000);
                    console.log(this.origCode);
                    this.ApiService.sendVerificationCode(this.user.mobile, this.origCode)
                        .then(r => {
                            this.signupState = state;
                            res.dismiss();
                        })
                        .catch(e => {
                            res.dismiss();
                            this.ApiService.showToast('Error sending verification code.');
                        });
                });
        });

I have already included the following in my config.xml:

<allow-navigation href="*" />
<access origin="*" />

This is the error I receive from the above implementation:

[Error] Unhandled Promise rejection: – "Network request failed" – "; Zone:" – "<root>" – "; Task:" – "Promise.then" – "; Value:" (2)
TypeError: Network request failed — vendor.js:125431(anonymous function) — fetch.js:499(anonymous function) — zone.js:188(anonymous function) — zone.js:503timer — zone.js:3034
	(anonymous function) (cordova.js:1540)
	(anonymous function) (polyfills.js:4009)
	handleUnhandledRejection (polyfills.js:4032)
	_loop_1 (polyfills.js:4023)
	(anonymous function) (polyfills.js:4027)
	drainMicroTaskQueue (polyfills.js:3927)
	(anonymous function) (polyfills.js:3826)
	invokeTask (polyfills.js:4990)
	globalZoneAwareCallback (polyfills.js:5016)
[Error] Origin null is not allowed by Access-Control-Allow-Origin.
[Error] XMLHttpRequest cannot load due to access control checks.
[Error] ERROR – TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. — vendor.js:124032
TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. — vendor.js:124032subscribeTo — subscribeTo.js:28subscribeToResult — subscribeToResult.js:15(anonymous function) — catchError.js:43(anonymous function) — Subscriber.js:79(anonymous function) — Subscriber.js:59(anonymous function) — Subscriber.js:79(anonymous function) — Subscriber.js:59(anonymous function) — OuterSubscriber.js:13(anonymous function) — InnerSubscriber.js:18(anonymous function) — Subscriber.js:59onError — http.js:1757onInvokeTask — core.js:28110(anonymous function) — zone.js:188(anonymous function) — zone.js:503invokeTask — zone.js:1671globalZoneAwareCallback — zone.js:1697
	defaultErrorLogger (vendor.js:42843)
	(anonymous function) (vendor.js:42891)
	next (vendor.js:67400)
	(anonymous function) (vendor.js:64232)
	(anonymous function) (vendor.js:113498)
	(anonymous function) (vendor.js:113436)
	(anonymous function) (vendor.js:113382)
	(anonymous function) (vendor.js:113359)
	(anonymous function) (vendor.js:113125)
	(anonymous function) (vendor.js:64214)
	(anonymous function) (polyfills.js:3462)
	onHandleError (vendor.js:66871)
	(anonymous function) (polyfills.js:3510)
	(anonymous function) (polyfills.js:3822)
	invokeTask (polyfills.js:4990)
	globalZoneAwareCallback (polyfills.js:5016)
[Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. (4088021903, line 0)```
Any help would be greatly appreciated.
2

Looks like a CORS issue

1 Like