Angular2中对ASP.NET MVC跨域访问

　　 项目开发决定使用angular2进行前后端分离开发，由我负责后端服务的开发，起初选择的是web api进行开发。对跨域访问通过API中间件+过滤器对跨域访问进行支持。开发一段后，通知需要移植到MVC4项目中一同发布angular2并且放弃API，但前期开发仍然需要分离开发。

遇到的问题

　　 想继续使用中间件和过滤器的方式对MVC中的Action进行操作和限制，但经过尝试后发现行不通。主要问题有几下几点。

API的处理管道和MVC的处理管道是两个完全不同的东西，所以原来用于API中的编码和方法不能复用。 需要采用其他方式解决javascript跨域请求中的OPTIONS请求问题。（资料显示javascript出于安全考虑，并不允许跨域请求。）

解决方法和步骤

　　 处理HTTP response header 中关于跨域的内容，我采用的是在web.config中 <system.webServer> 内添加如下内容。

 1       <  httpProtocol  > 
 2           <  customHeaders  > 
 3               <  add   name  ="Access-Control-Allow-Origin"   value  ="*"   /> 
 4               <  add   name  ="Access-Control-Allow-Headers"   value  ="Content-Type"   /> 
 5               <  add   name  ="Access-Control-Allow-Methods"   value  ="GET, POST, PUT, DELETE, OPTIONS"   /> 
 6           </  customHeaders  > 
 7       </  httpProtocol  > 

 （其他headers的值：Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With, Authorizatio）

（请根据实际需要进行增减！）

　　 处理http request zhong options 请求的内容

在跨域请求时会先触发一次options请求，根据response的header中内容以及返回状态，确定是否要进行正式的GET、POST等请求。但是在实际开发中我们不可能对action进行重复标记处理http的请求特性(attribute)。

 1           [HttpOptions]
  2           [HttpPost]
  3           public   ActionResult Index()
  4           {
  5               return   View();
  6          }

我的处理办法是在Global.asax中对所有options请求人为通过。来告诉client可以正常请求。

  1           void   Application_EndRequest()
   2           {
   3               if  ( this .Request.HttpMethod.ToUpper().Equals( "  OPTIONS  "  ))
   4               {
   5                   this .Response.Status =  "  200 OK  "  ;
   6                   this .Response.StatusCode =  200  ;
   7                   this .Response.StatusDescription =  "  OK  "  ;
   8                   this .Response.SubStatusCode =  200  ;
   9               }
  10          }

请求过程图片

一个GET请求，跨域操作下会进行两次请求，一次OPTIONS、一次GET。其中GET请求的执行正像前边提到的，会根据OPTIONS请求的状态而触发。

参考内容

《ASP.NET MVC5框架揭秘》    Artech      的书籍 《解决asp.net mvc的跨域请求问题》    Mr.XYZ    的博文

查看更多关于Angular2中对ASP.NET MVC跨域访问的详细内容...