角度-加载资源失败：服务器以404状态响应

Question

我有一个带有ASP. NET Core Web API后端和Angulal-13前端的项目。

Web API有这样一个endpoint：https://localhost:5001/api/v1/admin/teachers

登录后，当我将生成的不记名令牌粘贴到POSTMAN时，它会给出这样的结果：

{
  "result": [
    {
        "full_name": "Jamilu Kingston",
        "account_number": "1234567821",
        "user_name": "kingston",
        "mobile_number": "08099889921",
    }
  ],
  "page": 1,
  "per_page": 10,
  "total_pages": 1
}

从Angular前端，我有这些代码。

角度

teacher.service：

export class TeacherService {
  baseUrl = environment.apiUrl;
  token = localStorage.getItem('token');

  httpOptions = {
    headers: new HttpHeaders({'Content-type': 'application/json'}).set('Authorization',  `Bearer ${this.token}`)
  };

  constructor(
    private http: HttpClient,
    private router: Router
    ) { }

  getAllTeachers(): Observable<any> {
    return this.http.get(this.baseUrl + 'admin/teachers', this.httpOptions);
  }
}

教师组件：

export class TeachertsComponent implements OnInit {
  allTeacherList: any[] = [];

  constructor(
    private fb: FormBuilder,
    private teacherService: TeacherService,
    private router: Router,
    private toastr: ToastrService
    ) { }

  ngOnInit(): void {
    this.loadAllTeachers();
  }

  loadAllTeachers(){
    this.teacherService.getAllTeachers().subscribe({
      next: (res: any) => {
       console.log(res);
      },
      error: (error) => {
        this.toastr.error(error.message);
      }
    })
  }
}

我本以为它会加载所有的老师，但我遇到了这个错误：

加载资源失败：服务器响应状态为404

当我查看开发者网络时，我发现：

Request URL: https://localhost:5001/api/v1/admin/teachers
Request Method: GET
Status Code: 404 
Remote Address: [::1]:5001
Referrer Policy: strict-origin-when-cross-origin
access-control-allow-origin: *
content-length: 0
date: Thu, 13 Jan 2022 10:03:27 GMT
server: Kestrel
www-authenticate: Bearer error="invalid_token"
:authority: localhost:5001
:method: GET
:path: /api/v1/admin/teachers
:scheme: https
accept: application/json, text/plain, */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
authorization: Bearer "something is here"
origin: http://localhost:4200
referer: http://localhost:4200/

从上面的开发者网络中可以看到承载令牌。还有当我做控制台的时候。日志（承载${this.token}）；

我那里也有。

甚至连控制台都没有。对数（res）；

我该如何解决这个问题？

谢啦

Answer 1

您的“内容类型”拼写错误。但由于默认情况下内容类型设置为json，并且您没有任何内容，请尝试以下语法

const headerObj =new HttpHeaders().set("Authorization", "Bearer ${this.token}");

httpOptions = {
    headers:headerObj
  };