Angular / Web API 无法在端点上通信

Question

我遇到了一个问题，Angular 无法在 3 个端点中的 2 个端点上发出成功的请求，但我已确认所有与邮递员的工作，并且代理正在成功路由呼叫。 Chrome - 网络选项卡显示“已阻止：其他”，并且“ng serve”的输出不表示任何与代理有关的内容。我的角度服务和/或服务器端控制器有问题吗？

控制器

[Route("api/[controller]")]
[ApiController]
public class AffiliationController : ControllerBase
{
    public AffiliationController(
        IQueryHandler<GetAffiliationsQuery, IQueryable<Affiliation>> getAffiliationsQuery,
        ICommandHandler<ToggleAffiliationExclusionCommand> toggleAffiliationExclusionsCommand)
    {
        _getAffiliationsQuery = getAffiliationsQuery ?? throw new ArgumentNullException(nameof(getAffiliationsQuery));
        _toggleAffiliationExclusionsCommand = toggleAffiliationExclusionsCommand ?? throw new ArgumentNullException(nameof(toggleAffiliationExclusionsCommand));
    }

    private readonly IQueryHandler<GetAffiliationsQuery, IQueryable<Affiliation>> _getAffiliationsQuery;
    private readonly ICommandHandler<ToggleAffiliationExclusionCommand> _toggleAffiliationExclusionsCommand;

    // Successfully Called
    [HttpGet]
    public async Task<ActionResult<PaginationResult<Affiliation>>> GetAffiliations([FromQuery] PaginationModel model)
    {
        var affiliations = await _getAffiliationsQuery.Handle(new GetAffiliationsQuery())                                                            
                                               .PaginateAsync(model.PageIndex,                                                                            
                                                              model.PageSize);
        return affiliations;
    }

    // Not reached via Angular       
    [HttpGet("{id}")]
    public async Task<ActionResult<Affiliation>> Foo(int id)
    {
        var target = await _getAffiliationsQuery.Handle(new GetAffiliationsQuery())
                                                .SingleOrDefaultAsync(afn => afn.Id == id);
        if (target == null)
        {
            return NotFound();
        }
        await _toggleAffiliationExclusionsCommand.HandleAsync(new ToggleAffiliationExclusionCommand(id));
        return target;
    }

}

角度服务

export class AffiliationService {
  private readonly apiUrl = 'api/affiliation';

  constructor(
    private http: HttpClient
  ) { }

  public get(model: PaginationQuery): Observable<PaginationResult<Affiliation>> {
    // Works just fine
    return this.http
      .get<PaginationResult<Affiliation>>(`${this.apiUrl}`, { params: UtilsService.buildQueryParams(model) })
      .pipe(
        catchError(this.handleError)
      );
  }

  public toggle(affiliation: Affiliation) {
  // Does not work unless I pass the 'id' as a query string parameter instead of a route parameter
    return this.http
      .get(`${this.apiUrl}/${affiliation.id}`)
      .pipe(
        catchError(this.handleError)
      );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(`Backend returned code ${error.status}, body was:`);
      console.error(error.error);
    }
    return throwError('Something bad happened; please try again later.');
  }
}

proxy.conf.json

{
  "/api/*": {
    "target": "http://localhost:5000",
    "secure": false,
    "logLevel": "debug"
  }
}

NG 服务输出

注意

将'toggle'功能改成如下即可成功到达终点。但我不明白为什么这可以通过其他方式起作用，因为我可以通过 Postman 使用路由参数方法调用端点

  public toggle(affiliation: Affiliation) {
    return this.http
      .get(`${this.apiUrl}`, { params: UtilsService.buildQueryParams({ id: affiliation.id }) })
      .pipe(
        catchError(this.handleError)
      );
  }

Answer 1

这看起来像是一个 CORS 问题。

如果你想在不使用插件的情况下解决这个问题，你可以使用 WebApi Cors 包。

如果使用 C# ASP.NET CORE 项目：

参考下页开启CORS，请求可以 叫。 https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1

如果使用 C# WebAPI 项目：

运行以下命令为 WebApi 安装 CORS 包：

Install-Package Microsoft.AspNet.WebApi.Cors

那么你可以如下使用它：

using System.Web.Http;
namespace WebService
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // New code
            config.EnableCors();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

并参阅以下 URL 以获取完整的 microsoft 指南：

https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api