Angular 7 не могу получить данные из HttpGet. net core API

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

Сначала вы можете упростить код контроллера.

[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 должно разрешать запросы CORS с другого хоста.

В Startup.cs

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

Answer 2

Angular не позволит вам напрямую вызывать API, работающие на другом порту. В вашем случае вы ищете прокси-вызовы API на сервере, работающем через порт 43301.

Создайте файл с именем proxy.conf. json рядом с пакетом вашего проекта. json.

{"/ api": {"target": "http://localhost: 44301 ", "secure": false}}

In ваш класс EmployeeService меняет api Root на просто "/ api / employee"

Редактировать пакет. json file:

"start": "ng serve - proxy-config proxy.conf. json ",

Перезапустить проект Angular, используя" npm start "