Question

当我单击发送帖子时，它给出400（错误请求）如果有人解决了，我将不胜感激

我的API是http://dradiobeats.x10host.com/api/areas

我的app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {HttpClientModule } from '@angular/common/http';
import { Post} from './post.model';

@Component({
  selector: 'app-root',
  templateUrl: './get.component.html',
  styleUrls: ['./get.component.scss']
})
export class GetComponent implements OnInit {
  loadedPosts = [];

  constructor(private http: HttpClient) {
  }

  ngOnInit() {
  }

  onCreatePost(postData: {
    id: string;
    name: string;
    domain: string;
    description: string;
  }) {
    // Send Http request
    this.http.post('https://hamaaa-ff9ee.firebaseio.com/post.json', postData).subscribe(responseData => { console.log(responseData)} );
  }

}

我的app.component.html

<form>
<div  class="form-group pt-5">
  <label for="id"  >Id:</label>
  <input type="text" class="form-control" id="id" name="id">
</div>
<div class="form-group">
  <label for="name">Name:</label>
  <input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
  <label for="description">Description:</label>
  <input type="text" class="form-control" id="description" name="description">
</div>

<div class="form-group">
  <label for="domain">Domain:</label>
  <input type="text" class="form-control" id="domain" ngModel name="domain">
</div>

  <input type="file" (change)="onFileChanged($event)">
  <button type="button" (click)="onUpload()"  >UPLOAD</button>

<button type="button" class="btn btn-primary" (click)="onCreatePost()">SEND POST</button>

</form>

我的post.model.ts

export interface Post {
  id: string;
  name: string;
  domain: string;
  description: string;

}

请，有人告诉我我在做什么错如果有人解决了此错误，我将不胜感激

Answer 1

400错误请求是由于您从UI发送到API的对象不正确。它的对象格式应与API的对象相同。

API http://dradiobeats.x10host.com/api/areas的格式如下。

{
"id" : ..,
"name" : ..,
"description" : ..,
"domain" : ..,
"picture" : ..
}

但是UI不在请求中发送图片字段。因此，可能要检查您发送的对象格式是否与API的对象匹配。

还要验证双方的内容类型。

Answer 2

请通过MDN查找HTTP描述的错误代码here。

请在StackBlitz中找到重构的代码。

在您的情况下，我们很难分辨出相关端点代码的REST API代码。由于这个原因，我建议您在此处发布REST终结点代码，或者在其中检查要发送的帖子正文及其headers（例如Content-Type）以及该帖子正文的预期模型其余端点。

我查看发布端点的另一个观察结果是它不期望object，而是期望object array。另外，您的用户界面也缺少picture字段。

    {
      "data": [
        {
          "id": 3,
          "name": "Emardborough",
          "description": "Modi exercitationem voluptas odit veritatis ut. Non itaque quo est neque nostrum. Officia et qui natus et praesentium odit.",
          "domain": "weber.org",
          "picture": "Your base64 image here"
        },
        {
          "id": 3,
          "name": "Emardborough",
          "description": "Modi exercitationem voluptas odit veritatis ut. Non itaque quo est neque nostrum. Officia et qui natus et praesentium odit.",
          "domain": "weber.org",
          "picture": "Your base64 image here"
        }
      ]
    }

如果您可以将其作为对象数组传递，那么它将起作用。因此，您的onCreatePost方法应将下面的模型ApiModel传递给API，不是 ApiDataModel对象。

export class ApiModel {
  data: ApiDataModel[]
};

export class ApiDataModel{
  id: string;
  name: string;
  description: string;
  domain: string;
  picture: string;
}

像下面这样重构您的onCreatePost：

模型：

export class ApiModel {
  data: ApiDataModel[];
}

export class ApiDataModel {
  id: string;
  name: string;
  description: string;
  domain: string;
  picture: string;
}

onCreatePost方法：

let apimodel = new ApiModel();
let apidatamodel = new ApiDataModel();
apidatamodel.id = "1";
apidatamodel.name = "aaa";
apidatamodel.description = "dddd";
apidatamodel.domain = "aaa";
apidatamodel.picture = "aasdasd";
let myArray = new Array();
myArray.push(apidatamodel);
apimodel.data = myArray;

this.http.post('https://hamaaa-ff9ee.firebaseio.com/post.json', apimodel).subscribe(responseData => { console.log(responseData)} );
  }

发布数据n角度时出现错误的请求错误i

2 个答案: