Angular与Nestjs更新时出现未授权问题求助

后端功能正常，但前端提交表单更新用户资料时出现未授权错误，无法将数据存入数据库。报错截图显示未授权相关提示。

以下是相关代码：

User.interface #

export interface User {
  id?: number;
  name?: string;
  username?: string;
  email?: string;
  password?: string;
  role?: string;
  profileImage?: string;
}

user.service.ts #

updateOne(user: User): Observable<User> {
    console.log(user);
    return this.http.put('api/users/' + user.id, user);
  }

update-user-profile.component.ts #

update() {
    console.log('VALUE FORM: ', this.form?.getRawValue());
    this.userService.updateOne(this.form?.getRawValue()).subscribe(console.log);
  }

update-user-profile.component.html #

<form [formGroup]="form" (ngSubmit)="update()">
  <div>
    <mat-card class="container">
      <div style="width: 80%">
        <mat-card>
          <mat-card-content>
            <img
              *ngIf="form.get('profileImage')!.value"
              src="http://localhost:3000/api/users/profile-image/{{
                form.get('profileImage')!.value
              }}"
            />
            <ul>
              <li>
                <mat-progress-bar [value]="file.progress"></mat-progress-bar>
              </li>
            </ul>
          </mat-card-content>
          <mat-card-actions>
            <button mat-button color="warn" (click)="onClick()">
              <mat-icon>cloud_upload</mat-icon>
            </button>
          </mat-card-actions>
        </mat-card>
        <input
          type="file"
          #fileUpload
          id="fileUpload"
          name="fileUpload"
          accept="image/*"
          style="display: none"
        />
      </div>

      <div class="container" style="width: 80%">
        <mat-form-field>
          <input matInput placeholder="ID" formControlName="id" />
        </mat-form-field>

        <mat-form-field>
          <input matInput placeholder="Name" formControlName="name" />
        </mat-form-field>

        <mat-form-field>
          <input matInput placeholder="Username" formControlName="username" />
        </mat-form-field>
      </div>
      <p>
        To change the properties password and email, special logic is needed,
        this will come in later videos
      </p>
      <p>
        To change the profile image, takes some time to implement, will code in
        extra video
      </p>

      <button
        mat-flat-button
        color="primary"
        [disabled]="!form.valid"
        type="submit"
      >
        Update Profile
      </button>
    </mat-card>
  </div>
</form>

期望表单数据能正常存入数据库，请求协助解决该前端未授权问题。

内容的提问来源于stack exchange，提问作者edivaldo machado