Angular使http请求两次

Question

我有一个平均堆栈。 Angular 5。

我正在从表单中获取数据，我正在调用服务来处理将表单数据发送到后端api。

该服务使用HttpClient。它发送带有正确标头和有效负载的发布请求。它成功发布到数据库

但是......当我查看控制台的网络选项卡时，我看到2个相同的请求！一个成功，因为它是预期的请求，但另一个失败（由于db中的重复数据，它应该失败）

我不明白为什么要提出2个请求。我使用的是平均堆栈，所以（我相信）不应该有任何CORS问题。

有任何想法吗？

*更新信息我检查了网络选项卡

• 第一个请求有请求方法：POST（200 OK）
• 第二个请求也有请求方法：POST（500）
• 在控制台选项卡中，来自zone.js的第二个请求错误（webpack？）

我的表格

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text" 
      id="username"
      class="form-control"
      formControlName="username"
      placeholder="username" >
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input 
      type="email" 
      id="email"
      class="form-control"
      formControlName="email"
      placeholder="email" >
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input 
      type="password" 
      id="password"
      class="form-control"
      formControlName="password"
      placeholder="password" >
  </div>
  <div class="form-group">
    <label for="name">Restaurant Name</label>
    <input 
      type="text" 
      id="name"
      class="form-control"
      formControlName="name"
      placeholder="Restaurant Name" >
  </div>    
  <div class="form-group">
    <label for="url">Restaurant Url <br> <small class="form-text text-
    muted">A link that will take patrons to your list of available food 
    items</small></label>
    <input 
          type="text" 
          id="url"
          class="form-control form-contol-sm"
          formControlName="url"
          placeholder="RosasPizza123" >

  </div>
  <div class="form-group">
    <label for="address">Address</label>
    <input 
      type="text" 
      id="address"
      class="form-control"
      formControlName="address"
      placeholder="125 Address st" >
  </div>
  <div class="form-group">
    <label for="city">City/Town</label>
    <input 
      type="text" 
      id="city"
      class="form-control"
      formControlName="city"
      placeholder="Newburgh" >
  </div>
  <div class="form-group">
    <label for="state">State</label>
    <input 
      type="text" 
      id="state"
      class="form-control"
      formControlName="state"
      placeholder="NY"
      maxlength="2" >
  </div>
  <div class="form-group">
    <label for="zipcode">Zipcode</label>
    <input 
      type="text" 
      id="zipcode"
      class="form-control"
      formControlName="zipcode"
      placeholder="zipcode" >
  </div>
  <div class="form-group">
    <label for="phone">Phone</label>
    <input 
        type="tel" 
        id="phone"
        class="form-control"
        formControlName="phone"
        placeholder="phone" >
    </div>
    <button (click)="onSubmit()">Register</button>  
</form>

在.ts文件中

export class RegisterComponent implements OnInit {
  registerForm: FormGroup;

  constructor( private userService: UserService) { }

  ngOnInit() {    
    this.registerForm = new FormGroup({
      'username': new FormControl(null, Validators.required),
      'email': new FormControl(null, [
              Validators.required,
              Validators.email]),
      'password': new FormControl(null, Validators.required),
      'name': new FormControl(null, Validators.required),
      'url': new FormControl(null, Validators.required),
      'address': new FormControl(null, Validators.required),
      'city': new FormControl(null, Validators.required),
      'state': new FormControl(null, [
              Validators.required,
              Validators.maxLength(2)]),
      'zipcode': new FormControl(null, Validators.required),
      'phone': new FormControl(null),
   });
  }

onSubmit() {        
  const newUser = new User(
    this.registerForm.value.username,
    this.registerForm.value.email,
    this.registerForm.value.password,
    this.registerForm.value.name,
    this.registerForm.value.url,
    this.registerForm.value.address,
    this.registerForm.value.city,
    this.registerForm.value.state,
    this.registerForm.value.zipcode,
    this.registerForm.value.phone
  );

this.userService.register(newUser)
    .subscribe(
      (response) => {

        console.log("response", response);
      },
      () => {}
    );
  }

}

在服务文件中

   @Injectable()
   export class UserService {
     url = 'http://localhost:3000/api/';

     constructor(private http: HttpClient) {}

    // register user
     register(user: User) {
        const userString = JSON.stringify(user);
        const httpOptions = {
            headers: new HttpHeaders({
                'Content-Type': 'application/json'
                // auth: 'my-token'
            })
        };
        return this.http.post(this.url + 'register', userString, httpOptions);       
     }

    }

Answer 1

您声明了提交处理程序两次，一次在您的表单上，一次在您的按钮上

更换

<button (click)="onSubmit()">Register</button>

同

<button>Register</button>

Answer 2

其中一个几乎可以肯定是OPTIONS（飞行前）请求。它们看起来一目了然。

仔细查看标题部分中实际请求方法的网络选项卡。

干杯

Answer 3

（添加此作为答案，因为我没有足够的代表评论）：

OP特别提到第二个请求失败，所以这不太可能是OPTIONS + POST组合。

您提到您通过表单发布此数据。您能否向我们展示表单的HTML，以及如何在代码中构建它，最后是用于捕获值的代码？

如果我是一个博彩人，我猜你有一个保存点击处理程序和一个onSubmit处理程序，两者都在触发。除非在单击保存按钮时在单击处理程序上显式调用event.preventDefault()，否则onSubmit处理程序也将触发。所以这是要检查的一件事。