Question

由于某些原因，我正在迁移到.net核心API，因此我的GET API在邮递员/简单的浏览器调用上工作正常，但无法反映我的angular 7服务的结果。

我的API

[HttpGet]
    public async Task<ActionResult<List<Employee>>> GetAllEmployees()
    {
        return await _service.GetAllEmployees();
    }

我的Angular 7服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError, tap } from 'rxjs/operators';
import { Employee } from '../app/models/employee';


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

  public employees: Employee[];

  constructor(private httpService: HttpClient) {
  }

  apiRoot: string = 'http://localhost:44301/api/employee';

  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  public getAllEmployees(): Observable<Employee[]> {

    return this.httpService.get<Employee[]>(this.apiRoot, this.httpOptions).pipe(
      tap(data => console.log('All: ' + JSON.stringify(data))),
      catchError(this.handleError)
  );
  }

  private handleError(err: HttpErrorResponse) {

    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {

        errorMessage = `An error occurred: ${err.error.message}`;
    } else {

        errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
    }
    console.error(errorMessage);
    return throwError(errorMessage);
}

}

感谢您的帮助。我知道这非常简单，但这可能是因为我正在迁移到至少不擅长的新框架。

Answer 1

Angular不允许您直接调用在另一个端口上运行的API。对于您的情况，您正在寻找的是将API调用代理到在端口43301上运行的服务器。

在项目的package.json旁边创建一个名为proxy.conf.json的文件。

{“ / api”：{ “ target”：“ http://localhost:44301”， “安全”：false}}

在EmployeeService类中，将apiRoot更改为“ / api / employee”

编辑package.json文件：

“开始”：“ ng serve --proxy-config proxy.conf.json”，

使用“ npm start”重新启动Angular项目

Answer 2

首先，您可以简化控制器代码。

[HttpGet]
public async Task<IActionResult> GetAllEmployees()
{
     return Ok(await _service.GetAllEmployees());
}

在这种情况下，无需将HttpHeaders用于GET请求。

this.httpService.get<Employee[]>(this.apiRoot).pipe(...)

您是否将HttpClientModule导入了app.module.ts？

此外，您的ASP.NET Core应用程序还必须允许来自其他主机的CORS请求。

在Startup.cs

public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
    // ...
    if (env.IsDevelopment() {
        app.UseCors(builder => builder.WithOrigins("http://localhost:4200").AllowAnyMethod().AllowAnyHeader().AllowCredentials());
    }
    //...
}

Angular 7无法从HttpGet .net核心API获取数据

2 个答案: