如何使用 Angular 使用 Web API？答案

【问题标题】：How to consume web API using Angular?如何使用 Angular 使用 Web API？
【发布时间】：2018-01-24 00:44:31
【问题描述】：

我正在尝试从 Angular 使用 Web API。

我使用 Fiddler 测试了该服务，它运行良好。来自客户端的问题。

我尝试使用 Angular 进行以下操作（从 Angular.io 网站采用）：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Observable";
import { tap } from 'rxjs/operators/tap';

import { Hero } from "../hero";

@Injectable()
export class HeroService {

  constructor(private http: HttpClient) {
  }

  public getHerosData(): Observable<Hero[]> {
    var url: string = 'http://localhost/WebApplication2/api/Heros';

    return this.http.get<Hero[]>(url).pipe(
      tap(heros => this.log('Heros fetched.'))
    );
  }

  log(message: string): any {
    // log the message.
  }
}

我在使用 Web API 时看到以下错误：

任何帮助都会被占用。

回答：使用 InMemoryDataService 在我删除使用后阻止调用 Web API，Web API 被成功使用。

【问题讨论】：

究竟应该为该 API 提供什么服务？你确定它在正确的 URL 上吗？你不应该有一个端口吗？我建议您在询问之前至少将问题缩小到服务器端或客户端；客户是否提出了预期的要求？使用其他客户端（例如 Postman、CURL）时，服务器是否正确响应了该请求？
服务器端没问题。我使用 Fiddler 测试了 URL。来自客户端的问题。
您阅读了邮件吗？它似乎在寻找api 集合，而不是Heros（注意：复数应该是Heroes）集合。这表明路线是错误的；你确定它和你测试的另一个一样吗？
api：从“Route.config”文件自动写入。我用一些图片更新了问题。

标签： angular asp.net-web-api

【解决方案1】：

您的网址中包含 HTTP 动词。您可以在客户端 url 配置中更正：

var url: string = 'http://localhost/WebApplication2/api/Heros’;

这应该可以完成工作。

另外，请在您的应用中禁用任何 InMemoryMock service，以确保在向服务器发出 Ajax 请求时中间没有任何内容。

【讨论】：

您是否在客户端使用任何模拟，例如 InMemoryDataService？您可以禁用模拟，看看是否能解决这个问题。
是的，我在另一个组件中使用 InMemoryDataService。在一个组件中使用 InMemoryDataService 会影响其他组件？
我禁用了 InMemoryDataService 并且错误消息已更改。 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access
你领先一步。该应用程序现在正在向您的服务器发出 HTTP 请求。但是，角度和您的 api 的端口号是不同的。这就是您获得跨源请求阻止的原因。您应该能够通过为您的 Angular 应用程序启用 CORS 在您的 API 应用程序中解决它。谷歌“如何启用 CORS”，你会发现很多例子。

【解决方案2】：

我在另一个组件中使用InMemoryDataService，在我删除使用它之后，该服务可以工作。

【讨论】：

是的。你的答案是正确的答案。已标记。