потреблять hhtp почтовый запрос в Angular 9

Question

Я новичок в Angular и пытаюсь использовать веб-API в angular 9. Мой запрос http get работает нормально, но когда я отправляю запрос hhtp post, я нахожу следующие ошибки zone-evergreen. js: 2845 POST http://127.0.0.1: 8000 / insert 500 (внутренняя ошибка сервера) core. js: 6189 ОШИБКА В пост-запросе я создал компонент создания-пользователя и службу. Созданный мной веб-API находится в LARAVEL. Я использовал инструмент POSTMAN для отправки GET / PUT / POST / DELETE, и эти запросы работают хорошо, но в angular запрос get работает, а пост-запрос не работает. Я не смог найти причину следующих ошибок. Пожалуйста, прошу помочь мне решить эту проблему. Я буду очень благодарен. код моих разных файлов приведен ниже

**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);
  }

}

Answer 1

Если ответ 500 Внутренняя ошибка сервера. Проблема связана с вашим Laravel бэкэндом.

. Я бы посоветовал включить ведение журнала отладки в настройке Laravel и посмотреть, что там происходит. Также, чтобы быть на 100% уверенным, просто откройте инструменты разработчика для разработчиков в Google Chrome (F12) и выберите вкладку «Сеть», чтобы проверить запрос, который вы отправляете на свой бэкэнд.

Убедитесь, что тело POST является правильным, потому что это может быть вызвано тем, что внутренняя ошибка сервера 500 вызвана тем, что вы отправляете неверные данные или неверно отформатированные данные на сервер.