在Ionic 4中通过HTTP POST将json数据发送到后端不起作用。 [注意：试图获取非对象的属性]

Question

我尝试通过URL Qazxswpoi将Ionic 4中的http发送到我的PHP后端的http请求到我的PHP后端。

当我通过邮递员通过URL http://myexamplehost#1.com/api发送我的json数据时它工作得很好。我猜我在Ionic 4中通过http post发送的json数据有些不对。

所以我尝试通过我的其他网址Notice : trying to get property of non object...通过Ionic 4中的http帖子发送我的json数据，并且很久它看起来很好。

这是我通过邮递员发送的json：

http://myexamplehost#1.com/api

这是我通过Ionic 4 page.ts发送的http帖子：

https://myexamplehost#2.com/api

这是服务方法的样子：

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

这是后端的样子：

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

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

  }

所以我真正想知道的是它是一个CORS问题还是我的情况下的代码问题呢？因为我确实在控制台中收到了

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'
    }
    });

的错误消息。我该如何解决这个问题？

Answer 1

我想指出Access-Control-Request-Method是一个请求头，由浏览器在CORS预检请求中设置，它只能有一个值。

Access-Control-Allow-Methods是由后端返回的CORS响应头。

更换

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."'");

同

origin has been blocked by CORS policy

Answer 2

下面的代码适用于Ionic 4。

app.module.tsİmportHttpClientModule

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

将HttpClientModule添加到导入。

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

现在在你的另一页上。我的ucak.page.ts

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