Ionic HttpClient.post causes two entries into the database: null and correct data

Ionic Framework ionic-v3
1

I’m new to Ionic. I have an Ionic form that posts data to PHP.

Here is what my Ionic code looks like:

My event provider / service (event-service-rest.ts):

@Injectable()
export class EventService {

    constructor(public http: HttpClient) {}

    postAnEventRest(headers = null, params = null) {
        return this.http.post(eventApiURL, { headers, params });
    }
}

My event TypeScript class (create-event.ts):

export class CreateEventPage {

    public event = <any>{};

    constructor(public eventService: EventService) {}

    postAnEvent () {

        // temp set headers to null
        const headers = null
        const body = this.event;

        this.eventService.postAnEventRest(headers, body)
        .subscribe((data: any) => {
        this.event = data;
        },
        (error: any) => {
        console.log(error);
        });
    }
}

Here is what my PHP code looks like:

<?php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: *");

$jsonData = file_get_contents('php://input');
$data = json_decode($jsonData, true);
$event_title = $data['params']['event_title'];
$event_desc = $data['params']['event_desc'];

// Singleton Database Library - custom code for entering into database
$result = $db->insert('events', $event_title, $event_desc);
?>

The Ionic App either posts two posts into the PHP server or whatever it does, creates two database entries:

  1. Null
  2. $event_title and $event_desc is entered into the database

I tested my database class and it does not create two entries, so the issue is more likely caused by my Ionic code or the way my PHP code handles receiving the http post.

I looked at the Apache log file (pasted below) and there are two entries for each post: one as “OPTIONS” and one as “POST”. But I’m not sure if this Apache log explains the two entries into the database, but I thought I share it anyway.

192.168.1.2 - - [13/Jan/2018:13:21:27 -0800] "OPTIONS /events-json.php HTTP/1.1" 200 ...."
192.168.1.2 - - [13/Jan/2018:13:21:27 -0800] "POST /events-json.php HTTP/1.1" 200 - ..."

I appreciate any help:

  1. What I’m doing wrong that causes two database entries?
  2. Is this the correct way to structure and write Ionic code to post data (To create service / provider page that posts the data and do the subscribe in the TypeScript page)?
2

I solved the problem; however, I still will appreciate any advise about my Ionic code structure. Does my Ionic code and the way I structured it okay?

It seems like as part of CORS mechanism, there will be the OPTIONS request to the server.

I tried to ignore all OPTIONS request using .htaccess in order to solve this problem, but it did not help the situation. It seems like the OPTIONS request to the server must happen in order for the POST request to happen as part of CORS.

So, I just added the conditional code to check for POST requests in order to add the entry in the database and this solved the problem:

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $jsonData = file_get_contents('php://input');
    $data = json_decode($jsonData, true);
    $event_title = $data['params']['event_title'];
    $event_desc = $data['params']['event_desc'];

    // Singleton Database Library - custom code for entering into database
    $result = $db->insert('events', $event_title, $event_desc);
}