Angular2中对ASP.NET MVC跨域访问

2018-06-22 06:06:26来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  • 应用场景

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

  • 遇到的问题

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

  1. API的处理管道和MVC的处理管道是两个完全不同的东西,所以原来用于API中的编码和方法不能复用。
  2. 需要采用其他方式解决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请求的状态而触发。

  • 参考内容

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:[水煮 ASP.NET Web API 2 方法论] 目 录

下一篇:[水煮 ASP.NET Web API2 方法论](3-6)万能路由