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

前几天，按照AngularJS2的英雄指南教程走了一遍，教程网址是http://origin.angular.live/docs/ts/latest/tutorial/。

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

先来看一下WebApi和AngularJS的源代码：

WebApi

AngularJS

一、跨域访问（Cors）问题

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

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

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

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

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

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

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         }