在 Django REST 的本地主机上将 post 发送到 API 时 IONIC 3 中出现错误 400

Question

供应商rest.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { HttpHeaders } from '@angular/common/http/src/headers';

@Injectable()
export class RestProvider {

  apiUrl = 'http://127.0.0.1:8000'

  constructor(public http: HttpClient) {
    console.log('Hello RestProvider Provider');
  }

  getUsers() {
    return new Promise(resolve => {
      this.http.get(this.apiUrl+'/users/').subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
    });
  }

  addUser(data){
    console.log(JSON.stringify(data));
    return new Promise((resolve, reject) => {
      this.http.post(this.apiUrl+'/users/', JSON.stringify(data), 
      { headers: { 'Content-Type': 'application/json' } })
        .subscribe(res => {
          resolve(res);
        }, (err) => {
          reject(err);
        });
    });
  }

}

第adduser.ts

页

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';

@IonicPage()
@Component({
  selector: 'page-adduser',
  templateUrl: 'adduser.html',
})
export class AdduserPage {

  user = { email: '', groups: { url: '', name: '' }, url: '', username: ''};

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public restProvider: RestProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AdduserPage');
  }

  saveUser(){
    console.log(this.user);
    this.restProvider.addUser(this.user).then((result) => {
      console.log(result);
    }, (err) => {
      console.log(err);
    });
  }
}

第adduser.html

页

<ion-content padding>
  <h2>Add User</h2>
  <form (ngSubmit)="saveUser()">
    <ion-item>
      <ion-label>Username</ion-label>
      <ion-input type="text" [(ngModel)]="user.username" name="username"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input type="email" [(ngModel)]="user.email" name="email"></ion-input>
    </ion-item>
    <button ion-button type="submit" block>Add User</button>
  </form>
</ion-content>

当我尝试执行 POST:

时出现此错误

HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "Bad Request", url: "http://127.0.0.1:8000/users/", ok: false, …}
error
:
groups
:
Array(1)
0
:
"Hyperlink inválido - Sem combinação para a URL."
length
:
1
__proto__
:
Array(0)
__proto__
:
Object
headers
:
HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message
:
"Http failure response for http://127.0.0.1:8000/users/: 400 Bad Request"
name
:
"HttpErrorResponse"
ok
:
false
status
:
400
statusText
:
"Bad Request"
url
:
"http://127.0.0.1:8000/users/"
__proto__
:
HttpResponseBase

Answer 1

我已经解决了。问题出在这里：

user = { email: '', groups: { url: '', name: '' }, url: '', username: ''};

更正：

user = { email: '', groups: { }, username: ''};

在 Django REST 的本地主机上将 post 发送到 API 时 IONIC 3 中出现错误 400

Error 400 in IONIC 3 when sending post to API on localhost of Django REST

django

api

post

ionic3

bad-request

供应商rest.ts

第adduser.ts

第adduser.html