CODEWITHSUNDEEP
jsonangularionic-frameworkhttp-postionic4
ryanpeter
ryanpeter

Reputation: 21

Sending json data to backend via HTTP POST in Ionic 4 not working. [Notice: Trying to get property of non-object]

I try to send http request via http post in Ionic 4 to my PHP backend through URLhttp://myexamplehost#1.com/api and it gives me back Notice : trying to get property of non object....

When i send my json data through URL http://myexamplehost#1.com/api via postman it works just fine. I'm guessing my json data sent via http post in Ionic 4 is somehow wrong.

So i try to send my json data through my other URL https://myexamplehost#2.com/api via http post in Ionic 4 and long behold it works just fine.

Here's what the json i sent via postman :

{
  "id": "",
  "date": "2019-09-09",
  "name": "jason"
}

And here's what i sent via http post in Ionic 4 page.ts:

  mydata: Idata = {
    id:string;
    date:string;
    name:string
  }

   saveData(){
     this.dk.insertData(this.mydata).subscribe((result:any)=>{
       console.log(result['_body']);
     });

  }

Here's what the service method look like :

insertData(data:Idata){
    return this.http.post(this.configUrl+'?ins=true',data,{
      headers: { 'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT'
    }
    });

Here's what the backend look like :

if (isset($_SERVER['HTTP_ORIGIN'])) {
        header("Access-Control-Allow-Origin: *");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    }

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

        exit(0);
    }

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
    print_r(json_encode($request));
//    echo json_encode($request->name."-".$request->date);
//    echo json_encode($request->tgl);
    $result = $obj->insData("example_tb","null,'".date('Y-m-d',strtotime($request->date))."','".$request->name."'");

So what i really want to know is that is it a CORS issues or is it a code issues in my situation right there? Because i do get an error message of origin has been blocked by CORS policy in a console though. How do i fix this issues?

Upvotes: 0

Views: 10121

Answers (2)

abdullah
abdullah

Reputation: 181

Below code works for Ionic 4.

app.module.ts İmport HttpClientModule

import { HttpClientModule } from '@angular/common/http';

Add HttpClientModule to imports.

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [HttpClientModule],

Now on your other page. Mine ucak.page.ts

import { HttpClient } from '@angular/common/http';
constructor(public http: HttpClient) {}

SendDataFu(){
    
    
    

     let postData =  {
      user: "[email protected]",
      t: "vlIj",
      zip: 94089,
      forecast: 7
  }
   
     this.http.post("https://json.penzance.org/request", postData,{observe: 'response'})
       .subscribe(data => {
         console.log(data);
        
        }, error => {
         console.log(error);
       });
       
   }

Upvotes: 1

Code4Art
Code4Art

Reputation: 801

I would like to point that Access-Control-Request-Method is a request header that is set by the browser on CORS preflight requests, and it can only have one value.

Where The Access-Control-Allow-Methods is a CORS response header, returned by backend.

Replace

'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT'

With

'Access-Control-Request-Method': 'POST'

Upvotes: 1

Related Questions