AngularJS 2调用.net core WebAPI的几个坑

前几天，按照的英雄指南教程走了一遍，教程网址是。

在步骤完成后，又更进一步，在英雄增删改的时候，直接调用.net core的来实现后台数据的操作，替换教程中的模拟方式。在替换.net core 时，还是遇到了一些坑的，这里记录一下。

先来看一下和的源代码：

View Code

View Code

一、跨域访问（Cors）问题

在建好站点，启动运行，一切正常。我们仅显示前两个，结果如下：

然而，在客户端，出现了问题，界面没有任何英雄出现。

再查的控制台，发现了问题所在，的--Allow-没有开，也就是跨域访问不通过。

跨域访问，就是JS访问其他网址的信息。例如这里的的

1     getHeroes(): Promise {
2         return this.http.get(this.heroUrl).toPromise().then(response => response.json() as Hero[]).catch(this.handleError);
3     }

方法中，调用（网址）。的网址是:3000/，而的网址是:5000/api/。只要协议、域名、端口有任何一个不同，都被当作是不同的域。默认情况下是不支持直接跨域访问的。为了在中增加跨域访问，我们要在的.cs中打开--Allow-：

1         public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
2         {
3             app.UseCors(builder =>
4             {
5                 builder.AllowAnyOrigin();
6             });
7 
8             app.UseMvc();
9         }