Angular 邮递http://localhost:3000/auth 角度为400（错误请求）

我试图将注册表表单数据发送到服务器，但收到（错误的请求）。我使用postman测试我的服务器&它使用以下数据正常工作：

{
    "username": "root",
    "email": "root@gmail.com",
    "password": "Pesho@"
}

但角度有问题&找不到是问题所在

这是register.component.ts:

export class RegisterComponent implements OnInit {
  public registerFormGroup: FormGroup;

  constructor(
    private readonly auth: AuthService,
  ) { }

  ngOnInit() {
    this.registerFormGroup = this.auth.registerFormGroup(this.registerFormGroup);
  }

  public register(username: string, email: string, password: string) {
    this.auth.register(username, email, password);
    console.log({username});
    console.log({email});
    console.log({password});
  }
}

public register(username: string, password: string, email: string): Subscription {
    return this.http.post('http://localhost:3000/auth',
      {
        username,
        email,
        password,
      })
      .subscribe(
        (success: any) => {
          this.notificator.success(success.message);
          setTimeout(() => {
            this.login(email, password);
          }, 1500);
        }
        ,
        (err) => {
          this.notificator.error(err.error.message);
        }
      );
  }

<form class="example-form" [formGroup]="this.registerFormGroup"
      (ngSubmit)="this.register(name.value, email.value, password.value)" autocomplete="off">

      <mat-card-content>

        <mat-form-field class="example-full-width">
          <input matInput #name autocomplete="off" formControlName="name" type="text" class="form-control"
          placeholder="Name *">
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <input matInput #email autocomplete="off" #email matInput class="form-control" placeholder="Email *" type="email"
          formControlName="email">
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <input matInput #password formControlName="password" type="password" class="form-control" placeholder="Password *">
        </mat-form-field>

      </mat-card-content>

      <button mat-stroked-button color="accent" class="btn-block" type="submit" value="Sign Up">Register</button>

    </form>

public register(username: string, email: string, password: string) {
this.auth.register(username, email, password); <---- Here you are passing username,email,password
console.log({username});
console.log({email});
console.log({password});
  }
}

这是auth.srvice.ts:

export class RegisterComponent implements OnInit {
  public registerFormGroup: FormGroup;

  constructor(
    private readonly auth: AuthService,
  ) { }

  ngOnInit() {
    this.registerFormGroup = this.auth.registerFormGroup(this.registerFormGroup);
  }

  public register(username: string, email: string, password: string) {
    this.auth.register(username, email, password);
    console.log({username});
    console.log({email});
    console.log({password});
  }
}

public register(username: string, password: string, email: string): Subscription {
    return this.http.post('http://localhost:3000/auth',
      {
        username,
        email,
        password,
      })
      .subscribe(
        (success: any) => {
          this.notificator.success(success.message);
          setTimeout(() => {
            this.login(email, password);
          }, 1500);
        }
        ,
        (err) => {
          this.notificator.error(err.error.message);
        }
      );
  }

<form class="example-form" [formGroup]="this.registerFormGroup"
      (ngSubmit)="this.register(name.value, email.value, password.value)" autocomplete="off">

      <mat-card-content>

        <mat-form-field class="example-full-width">
          <input matInput #name autocomplete="off" formControlName="name" type="text" class="form-control"
          placeholder="Name *">
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <input matInput #email autocomplete="off" #email matInput class="form-control" placeholder="Email *" type="email"
          formControlName="email">
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <input matInput #password formControlName="password" type="password" class="form-control" placeholder="Password *">
        </mat-form-field>

      </mat-card-content>

      <button mat-stroked-button color="accent" class="btn-block" type="submit" value="Sign Up">Register</button>

    </form>

public register(username: string, email: string, password: string) {
this.auth.register(username, email, password); <---- Here you are passing username,email,password
console.log({username});
console.log({email});
console.log({password});
  }
}

这是一个小的html注册表单-register.component.html:

export class RegisterComponent implements OnInit {
  public registerFormGroup: FormGroup;

  constructor(
    private readonly auth: AuthService,
  ) { }

  ngOnInit() {
    this.registerFormGroup = this.auth.registerFormGroup(this.registerFormGroup);
  }

  public register(username: string, email: string, password: string) {
    this.auth.register(username, email, password);
    console.log({username});
    console.log({email});
    console.log({password});
  }
}

public register(username: string, password: string, email: string): Subscription {
    return this.http.post('http://localhost:3000/auth',
      {
        username,
        email,
        password,
      })
      .subscribe(
        (success: any) => {
          this.notificator.success(success.message);
          setTimeout(() => {
            this.login(email, password);
          }, 1500);
        }
        ,
        (err) => {
          this.notificator.error(err.error.message);
        }
      );
  }

<form class="example-form" [formGroup]="this.registerFormGroup"
      (ngSubmit)="this.register(name.value, email.value, password.value)" autocomplete="off">

      <mat-card-content>

        <mat-form-field class="example-full-width">
          <input matInput #name autocomplete="off" formControlName="name" type="text" class="form-control"
          placeholder="Name *">
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <input matInput #email autocomplete="off" #email matInput class="form-control" placeholder="Email *" type="email"
          formControlName="email">
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <input matInput #password formControlName="password" type="password" class="form-control" placeholder="Password *">
        </mat-form-field>

      </mat-card-content>

      <button mat-stroked-button color="accent" class="btn-block" type="submit" value="Sign Up">Register</button>

    </form>

public register(username: string, email: string, password: string) {
this.auth.register(username, email, password); <---- Here you are passing username,email,password
console.log({username});
console.log({email});
console.log({password});
  }
}

登记

我放了一些控制台日志来查看表单发送的内容&它们看起来是正确的：

{用户名：“根”} 用户名：“root” 原型：对象

{电子邮件：root@gmail.com"} 电子邮件：“root@gmail.com" 原型：对象

{密码：“Pesho@} 密码：“Pesho@” 原型：对象

---

我在上一个Bootstrap项目中使用了相同的逻辑&它工作得非常好。在这种情况下，使用材料，但我认为问题不在于此。我在NestJS服务器终端中没有收到任何错误。

问题在于传递参数的顺序

这是您的register.component.ts:

export class RegisterComponent implements OnInit {
  public registerFormGroup: FormGroup;

  constructor(
    private readonly auth: AuthService,
  ) { }

  ngOnInit() {
    this.registerFormGroup = this.auth.registerFormGroup(this.registerFormGroup);
  }

  public register(username: string, email: string, password: string) {
    this.auth.register(username, email, password);
    console.log({username});
    console.log({email});
    console.log({password});
  }
}

public register(username: string, password: string, email: string): Subscription {
    return this.http.post('http://localhost:3000/auth',
      {
        username,
        email,
        password,
      })
      .subscribe(
        (success: any) => {
          this.notificator.success(success.message);
          setTimeout(() => {
            this.login(email, password);
          }, 1500);
        }
        ,
        (err) => {
          this.notificator.error(err.error.message);
        }
      );
  }

<form class="example-form" [formGroup]="this.registerFormGroup"
      (ngSubmit)="this.register(name.value, email.value, password.value)" autocomplete="off">

      <mat-card-content>

        <mat-form-field class="example-full-width">
          <input matInput #name autocomplete="off" formControlName="name" type="text" class="form-control"
          placeholder="Name *">
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <input matInput #email autocomplete="off" #email matInput class="form-control" placeholder="Email *" type="email"
          formControlName="email">
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <input matInput #password formControlName="password" type="password" class="form-control" placeholder="Password *">
        </mat-form-field>

      </mat-card-content>

      <button mat-stroked-button color="accent" class="btn-block" type="submit" value="Sign Up">Register</button>

    </form>

public register(username: string, email: string, password: string) {
this.auth.register(username, email, password); <---- Here you are passing username,email,password
console.log({username});
console.log({email});
console.log({password});
  }
}

---

因此，要在register.component.ts或auth.srvice.ts

中修复此开关参数，您可以发布接收请求的服务器端代码，并且您是否收到任何CORS错误？这是服务器端逻辑-。没有收到任何错误，只是在浏览器控制台中。如果用postman输入日期，一切正常，用户转到DB…您不会用post请求发送任何标题，比如

application/json

您对postman做了同样的事情吗？另外，我从来没有使用过NestJS，所以我可能帮不了那么多忙，但我会试试的。我仍然认为错误不是来自NestJS。post请求位于auth.service.t中，请尝试在post请求之前添加此项

let headers=new HttpHeaders（）.set（'Content-Type'，'application/json'）

然后

返回此.http.post（'http://localhost:3000/auth“，{username，email，password，}，{headers:headers}）

谢谢！我在使用你的建议5分钟前发现了同样的事情。详细的标题日志告诉我如何注册并解决电子邮件问题。因此，remove@IsEmail&post状态为201（OK）。我在数据库注册中看到email=password&切换参数。谢谢你的帮助：）