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

我试图通过Ionic 4中的http post，通过URL

将http请求发送到我的PHP后端http://myexamplehost#1.com/api

它返回给我

注意：试图获取非对象的属性…

当我通过URL

发送json数据时http://myexamplehost#1.com/api

通过邮递员，一切正常。我猜我在Ionic 4中通过http post发送的json数据是错误的

所以我尝试通过我的另一个URL

https://myexamplehost#2.com/api

在Ionic 4中通过http post，长时间看，它工作正常

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

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

以下是我在Ionic 4 page.ts中通过http post发送的内容：

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

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

  }

服务方法如下所示：

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

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

以下是后端的外观：

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

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

---

所以我真正想知道的是，在我的情况下，这是CORS问题还是代码问题？因为我确实在控制台中收到了一条错误消息，

来源已被CORS策略

阻止。如何解决此问题？

我想指出，访问控制请求方法是浏览器在CORS飞行前请求上设置的请求头，它只能有一个值

其中，访问控制允许方法是由后端返回的CORS响应头

替换

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

与

---

我想指出，访问控制请求方法是浏览器在CORS飞行前请求上设置的请求头，它只能有一个值

其中，访问控制允许方法是由后端返回的CORS响应头

替换

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

与

---

下面的代码适用于Ionic 4

app.module.ts İ导入HttpClientModule

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

将HttpClientModule添加到导入

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

现在进入另一页。 我的ucak.page.ts

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

SendDataFu(){
    
    
    

     let postData =  {
      user: "doctoravatar@yahoo.com",
      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);
       });
       
   }

---

下面的代码适用于Ionic 4

app.module.ts İ导入HttpClientModule

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

将HttpClientModule添加到导入

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

现在进入另一页。 我的ucak.page.ts

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

SendDataFu(){
    
    
    

     let postData =  {
      user: "doctoravatar@yahoo.com",
      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);
       });
       
   }

---

我已经尝试按照您的建议更改服务中的标题，但仍然不起作用。控制台中出现相同的错误<代码>在'http://myexamplehost#1.com/api'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在'access control Allow Origin'标头。检查更新的答案。一般来说，只需确保设置CORS头。在后端添加一些额外的日志，以确保执行设计的代码。确保ajax请求的响应头包含仍不工作的CORS头。但是我得到了一个稍微不同的错误，尽管

对飞行前请求的响应没有通过访问控制检查：它没有HTTP ok状态。

哪里出了问题？确保返回正确的CORS头<代码>标题（'Access-Control-Allow-Origin:'）

标题（'Access-Control-Allow-Methods:GET、POST、PATCH、PUT、DELETE、OPTIONS'）

这不正是我在我之前的文章中在后端所做的吗？我已经尝试按照您的建议更改服务中的标题，但仍然不起作用。控制台中出现相同的错误<代码>在'http://myexamplehost#1.com/api'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在'access control Allow Origin'标头。检查更新的答案。一般来说，只需确保设置CORS头。在后端添加一些额外的日志，以确保执行设计的代码。确保ajax请求的响应头包含仍不工作的CORS头。但是我得到了一个稍微不同的错误，尽管

对飞行前请求的响应没有通过访问控制检查：它没有HTTP ok状态。

哪里出了问题？确保返回正确的CORS头<代码>标题（'Access-Control-Allow-Origin:'）

标题（'Access-Control-Allow-Methods:GET、POST、PATCH、PUT、DELETE、OPTIONS'）

这不正是我在之前的文章中在后端所做的吗？如果没有在任何地方使用，为什么要使用标题？如果没有在任何地方使用，为什么要使用标题？