无法从后端获取数据得到 404答案

【问题标题】：Not able to fetch data from backend got 404无法从后端获取数据得到 404
【发布时间】：2019-02-22 15:00:29
【问题描述】：

我正在尝试使用 HttpClient 从 angular7 中的后端检索数据，如下所示：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

    constructor(private http:HttpClient){}

    ngOnInit(){
        this.callTesting().subscribe(users => {
            console.log('users is ', users);
        })
    }

    callTesting(){
        console.log('call testing ');
        return this.http.get('https://ibomyangular.azurewebsites.net/api/Courses');
    }
}

但出现以下错误：

{
  "body": {
    "error": "Collection 'Courses' not found"
  },
  "url": "https://myangular.azurewebsites.net/api/Courses",
  "headers": {
    "normalizedNames": {},
    "lazyUpdate": null
  },
  "status": 404,
  "statusText": "Not Found"
}

如果我将 url 粘贴到浏览器 https://myangular.azurewebsites.net/api/Courses json 会加载。邮递员也以同样的方式获取值。

我认为这是因为 CORS 所以我添加了代理 json 像：

{
  "api/Courses": {
    "target": "https://myangular.azurewebsites.net",
    "secure": false
  },
  "changeOrigin": true
}

但仍然没有获得价值。在package.json 我添加了这样的开头：

"start": "ng serve --proxy-config proxy.conf.json", 仍然没有运气。我还缺少什么？有人帮帮我吗？

提前致谢。

【问题讨论】：

标签： angular7 angular-httpclient

【解决方案1】：

在我从后端获得真正的 api 之前，我在 angular7 中使用了HttpClientInMemoryWebApiModule，在我评论模块导入后它工作正常。

谢谢！！

【讨论】：

【解决方案2】：

请找到以下代码。对我来说它工作正常：

**create interface for response data type:**
export interface Apitype {
id:any;
name:any;
description:any;
subjectId:any;
subjectTypeId:any;
subjectLevelId:any;
subjectOptionId:any;
languageId:any;
}

**create service class for api call:**
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Apitype} from './Apitype';

@Injectable()
export class ApimiddleService {

  constructor(private http: HttpClient) { }

  searchApi(){
    console.log("calling api");
//typed api call
return this.http.get<Apitype>('https://ibomyangular.azurewebsites.net/api/Courses');
  }

}

**Calling and subscribing the data ,searchapi() in apimiddle service class from app.component.ts file**
import { Component } from '@angular/core';
import { ApimiddleService } from './apimiddle.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
data :any;
constructor(private apiserv:ApimiddleService){

}
  ngOnInit(){
   console.log("calling ngOnInit");
 this.apiserv.searchApi().subscribe(data=>
      {
        console.log(data);
        this.data=data;
      });
  }

}

**view:app.component.html**
<div class="containner">
<div class="card" style="width: 18rem;" *ngFor="let course of data">
  <ul class="list-group list-group-flush">
    <li class="list-group-item list-group-item active">{{course.id}}</li>
    <li class="list-group-item">{{course.name}}</li>
    <li class="list-group-item">{{course.description}}</li>
    <li class="list-group-item">{{course.subjectId}}</li>
    <li class="list-group-item">{{course.subjectTypeId}}</li>
    <li class="list-group-item">{{course.subjectLevelId}}</li>
    <li class="list-group-item">{{course.subjectOptionId}}</li>
    <li class="list-group-item">{{course.subjectTypeId}}</li>
    <li class="list-group-item">{{course.languageId}}</li>
  </ul>
</div>
</div>

【讨论】：