CORS error with Angular HTTP and PHP

Ionic Framework Ionic Angular
1

Hello, I have been stuck with this for days and I am sort of new in ionic… Any possible solution that might work is welcome.

------> So, I have been making HTTP calls using angular’s HTTPClient in my ionic app for android. The code -

// connection with server
  postData(body, file) {
    const type = 'application/json; charset=UTF-8';
    const httpOptions = {
        headers: new HttpHeaders({   'Content-Type': type  })
    };
    return this.http.post(this.server + file, body, httpOptions)
        .pipe(
            catchError(this.handleError)
        );

------> I have PHP for backend with these headers -

   header('Access-Control-Allow-Origin: *');
   header('Access-Control-Allow-Method: POST, GET, OPTIONS');
   header('Access-Control-Allow-Headers: Content-Type'); 
   header('Content-Type: text/html; charset=utf-8');
 
    $ReceivedData = json_decode(file_get_contents("php://input"), true);

------> Problem: The HTTP connection works perfectly in local server. But when I put the exact same PHP files on a live server. The preflight requests fail with the following error:

Access to XMLHttpRequest at ‘http://liveserveraddress/index.php’ from origin ‘http://localhost:8100’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

What am I doing wrong?

ionic info

Ionic:

   Ionic CLI                     : 5.4.16 (C:\Users\admin\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.901.7
   @angular-devkit/schematics    : 9.1.7
   @angular/cli                  : 9.1.7
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 6 other plugins)

Utility:

   cordova-res : 0.14.0
   native-run  : 0.3.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\admin\AppData\Local\Android\Sdk)
   NodeJS            : v10.16.1 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10
2

use the native HTTP plugin or take care of cors from your backend

3 
header('Access-Control-Allow-Method: POST, GET, OPTIONS');

on your code should be ( …Methods )

header('Access-Control-Allow-Methods: POST, GET, OPTIONS');