Angular 发出 http 请求两次

Question

我有一个平均堆栈。角度 5.

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

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

但。。。当我查看主机的"网络"选项卡时，我看到正在发出 2 个相同的请求！一个成功，因为它是预期的请求，但另一个失败(由于数据库中的重复数据应该失败)

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

有什么想法吗？

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

• 第一个请求具有请求方法：开机自检(200 OK)
• 第二个请求也有请求方法：POST (500)
• 在控制台选项卡中，来自区域.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

其中之一几乎可以肯定是选项(飞行前)请求。它们一目了然。

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

干杯