Angular 发出两次 http 请求

Question

我有一个平均堆栈。 Angular5.

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

该服务使用了 HttpClient。它使用正确的 headers 和负载发送 post 请求。它成功地 posts 到数据库

但是...当我查看控制台的“网络”选项卡时，我看到发出了 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

其中之一几乎可以肯定是 OPTIONS (pre-flight) 请求。他们一眼看上去很相似。

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

干杯

Answer 2

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

替换

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

和

<button>Register</button>

Angular 发出两次 http 请求

Angular makes http request Twice

angular

http

mean-stack

angular5

angular2-http