在 Angular 9 中使用 hhtp 发布请求

萨吉德

我是 Angular 的新手,并尝试在 Angular 9 中使用 Web API。我的 http get 请求运行良好,但是当我发送 hhtp post 请求时,我发现以下错误 zone-evergreen.js:2845 POST http://127.0.0.1:8000 /insert 500(内部服务器错误)core.js:6189 错误在发布请求中,我创建了一个创建用户组件和一个服务。我创建的 Web API 在 LARAVEL 中。我使用 POSTMAN 工具提交 GET/PUT/POST/DELETE,这些请求运行良好,但在 angular get 请求中有效,而 post 请求无效。我找不到以下错误的原因。请帮助我解决这个问题。我将非常感谢。我的不同文件的代码如下

**user.service.ts**

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private http: HttpClient) { }

  getUser(): Observable<any> {
    return this.http.get('http://127.0.0.1:8000/basic');
  }
  addUser(form: any): Observable<any> {

    return this.http.post('http://127.0.0.1:8000/insert', form);
  }
}

create-user.component.html
<br><br>
<form #form="ngForm" (submit)="onSubmit(form)">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" name="name" ngModel placeholder="Enter Name">
    <small id="emailHelp" class="form-text text-muted"></small>
  </div>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" name="email" mgModel aria-describedby="emailHelp"
      placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted"></small>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" name="password" ngModel placeholder="Password">
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>
create-user.component.ts
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { UserService } from '../services/user.service';

@Component({
  selector: 'app-create-user',
  templateUrl: './create-user.component.html',
  styleUrls: ['./create-user.component.css']
})
export class CreateUserComponent implements OnInit {

  constructor(private service: UserService) { }

  ngOnInit(): void {
  }

  onSubmit(form: NgForm) {
    this.service.addUser(form.value).subscribe(
      res => {
        alert('data has been added');
      }
    )
    console.log(form.value);
  }

}
马丁·蒂博

如果响应是 500 内部服务器错误。问题在于您的 Laravel 后端。

我的建议是在你的 Laravel 设置中添加一些调试日志,看看那里发生了什么错误。同样要 100% 确定,只需在 Google Chrome (F12) 中打开您的开发人员开发工具并选择“网络”选项卡以检查您提交给后端的请求。

验证 POST 正文是否正确,因为这可能是因为您向后端发送了错误的数据或格式不正确的数据而触发了 500 Internal server 错误。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章