Angular 8 HTTP Post请求失败404错误

我正在尝试构建一个基本的angular电话簿应用程序，它能够查看、创建联系人。 我使用HTTPClient Post请求创建联系人，类似于教程中演示的方式，但Post请求失败，出现以下错误“HttpErrorResponse{headers:HttpHeaders，status:404，statusText:“Not Found”，url:，ok:false，…}” 下面是我的服务文件

    import { HttpClient } from '@angular/common/http';
    import { Contact } from './contact';
    import { Observable } from 'rxjs';

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

      constructor(private httpClient: HttpClient) { }

      contactUrl = 'assets/contacts.json';

      getContacts(): Observable<Contact []> {
        return this.httpClient.get<Contact []>(this.contactUrl);
      }

      postContact(contact: Contact): Observable<Contact> {
        return this.httpClient.post<Contact>(this.contactUrl,contact);
      } 

    }

这是一个html文件

<div class="jumbotron">
<h3>New Contact</h3>

<form [formGroup]= "contactForm">
    <div>
        <label for="firstName">
            First Name
        </label><br>
        <input id="firstName" type="text" formControlName="firstName">
    </div>

    <div>
        <label for="lastName">
            Last Name
        </label><br>
        <input id="lastName" type="text" formControlName="lastName">
    </div>

    <div>
        <label for="eMail">
            Email
        </label><br>
        <input id="eMail" type="email" formControlName="eMail">
    </div>

    <div>
        <label for="phoneNumber">
            Phone Number
        </label><br>
        <input id="phoneNumber" type="tel" formControlName="phoneNumber" pattern="[0-9]{10}">
    </div>

    <div>
        <label>
            Status
        </label><br>
        <input id="Active" type="radio" value="Active" formControlName="status">
        <label for="Active">Active</label><br>
        <input id="Inactive" type="radio" value="Inactive" formControlName="status">
        <label for="Inactive">Inactive</label><br>
    </div>


    <button type="submit" (click)="postContact(); getContacts()">Add</button>
</form>
</div>

当我单击Add按钮时，在networks选项卡中我看到状态为404的post请求。 我发现了几个类似的问题，但没有一个对我有用。 如果您对如何解决此问题有任何想法或遇到类似问题，我们将非常感谢您提供的任何帮助或意见

---

谢谢

您收到404错误，这意味着页面未找到错误。因此，您从angular应用程序引用的端点很可能不存在。因此，请再次检查contactUrl，或者只是与postman一起检查端点并粘贴URL，看看它是否有效。

您将收到404错误，这意味着页面未找到错误。因此，您从angular应用程序引用的端点很可能不存在。因此，请再次检查contactUrl，或者与postman一起检查端点并粘贴URL，看看它是否有效。

您需要一个Web服务器来处理POST请求。angular附带的dev服务器只提供文件，不处理其他请求。我必须从本地的json文件中获取数据。这也需要一个web服务器。如果需要，请解释一下我是如何做到这一点的。我只是一个初学者。您需要一个web服务器来处理POST请求。angular附带的dev服务器只提供文件，不处理其他请求。我必须从本地的json文件中获取数据。这也需要一个web服务器。如果需要，请解释一下我是如何做到这一点的。我只是一个初学者。我能够使用browser访问端点，get（）请求工作正常。然而，我与Postman进行了检查，发现了相同的404状态，知道为什么会发生这种情况吗？如果您可以共享API的基本代码，这将非常有用。我没有使用任何API，而是使用json文件来获取和存储数据，我已经发布了这些数据。我可以使用浏览器访问端点，并且get（）请求工作正常。但是我和邮递员核实了404的状态，知道为什么会发生这种情况吗？如果你能分享你的API的基本代码，那将非常有用。我没有使用任何API，而是使用json文件来获取和存储我已经发布的数据

<div class="jumbotron">
<h3>New Contact</h3>

<form [formGroup]= "contactForm">
    <div>
        <label for="firstName">
            First Name
        </label><br>
        <input id="firstName" type="text" formControlName="firstName">
    </div>

    <div>
        <label for="lastName">
            Last Name
        </label><br>
        <input id="lastName" type="text" formControlName="lastName">
    </div>

    <div>
        <label for="eMail">
            Email
        </label><br>
        <input id="eMail" type="email" formControlName="eMail">
    </div>

    <div>
        <label for="phoneNumber">
            Phone Number
        </label><br>
        <input id="phoneNumber" type="tel" formControlName="phoneNumber" pattern="[0-9]{10}">
    </div>

    <div>
        <label>
            Status
        </label><br>
        <input id="Active" type="radio" value="Active" formControlName="status">
        <label for="Active">Active</label><br>
        <input id="Inactive" type="radio" value="Inactive" formControlName="status">
        <label for="Inactive">Inactive</label><br>
    </div>


    <button type="submit" (click)="postContact(); getContacts()">Add</button>
</form>
</div>

[
    { 
     "id": "1",
     "firstName":"abc",
     "lastName":"cba",
     "email":"abc_cba@abc.com",
     "phoneNumber":"1234567890",
     "status":"active"
     },
     { 
        "id": "2",
        "firstName":"def",
        "lastName":"fed",
        "email":"def_fed@def.com",
        "phoneNumber":"0987654321",
        "status":"inactive"
    }
 ]