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> 内添加如下内容。
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</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)。
[HttpOptions]
[HttpPost]
public ActionResult Index()
{
return View();
}
我的处理办法是在Global.asax中对所有options请求人为通过。来告诉client可以正常请求。
void Application_EndRequest()
{
if (this.Request.HttpMethod.ToUpper().Equals("OPTIONS"))
{
this.Response.Status = "200 OK";
this.Response.StatusCode = ;
this.Response.StatusDescription = "OK";
this.Response.SubStatusCode = ;
}
}
请求过程图片
一个GET请求,跨域操作下会进行两次请求,一次OPTIONS、一次GET。其中GET请求的执行正像前边提到的,会根据OPTIONS请求的状态而触发。
参考内容
Angular2中对ASP.NET MVC跨域访问的更多相关文章
- asp.net允许跨域访问
C# ASP.NET MVC 配置允许跨域访问 在web.config文件中的 system.webServer 节点下 增加如下配置 <httpProtocol> <customH ...
- Java中设置多个Access-Control-Allow-Origin跨域访问
1.如果服务端是Java开发的,添加如下设置允许跨域即可,但是这样做是允许所有域名都可以访问,不够安全. response.setHeader("Access-Control-Allow-O ...
- Asp.Net 跨域,Asp.Net MVC 跨域,Session共享,CORS,Asp.Net CORS,Asp.Net MVC CORS,MVC CORS
比如 http://www.test.com 和 http://m.test.com 一.简单粗暴的方法 Web.Config <system.web> <!--其他配置 省略……- ...
- asp.net mvc跨域filter
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- asp.net mvc 跨域配置
修改 web.config 文件 <system.webServer> <httpProtocol> <customHeaders> <add name=&q ...
- MVC跨域CORS扩展
一般的基于浏览器跨域的主要解决方法有这么几种:1.JSONP 2.IFrame方式 3.通过flash实现 4.CORS跨域资源共享 ,这里我们主要关注的是在MVC里面的CORS ...
- Web安全技术(3)-浏览器的跨域访问
http://www.blogjava.net/linli/archive/2015/04/22/424584.html 一.浏览器介绍 对于Web应用来说,浏览器是最重要的客户端. 目前浏览器五花八 ...
- .Net WebApi 支持跨域访问使用 Microsoft.AspNet.WebApi.Cors
首先导入Cors库,通过程序包管理控制台导入 Install-Package Microsoft.AspNet.WebApi.Cors 引用库之后,我们需要进行简单的配置. 现在WebApiConfi ...
- Ajax不能跨域访问的解决方案
文章介绍 这是一篇,引导文吧... 因为写这篇文章时,实在想不出该如何分序.因此以实现跨域访问为目的,从基础知识往上写.最后以百度搜索智能提示为例,来讲解跨域的具体应用! 内容 首先,我们得明确什 ...
随机推荐
- [C#] C# 知识回顾 - 学会使用异常
学会使用异常 在 C# 中,程序中在运行时出现的错误,会不断在程序中进行传播,这种机制称为“异常”. 异常通常由错误的代码引发,并由能够更正错误的代码进行 catch. 异常可由 .NET 的 CLR ...
- 简单搭建 nuget 内部服务器
搭建 nuget 内部服务器,最好的方式是使用 ProGet,参考博文<用 ProGet 搭建内部的 NuGet 服务器>,好处非常多,但需要使用 SQL Server 数据库,如果不想使 ...
- CSS 3学习——transform 2D转换
首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...
- Android Weekly Notes Issue #236
Android Weekly Issue #236 December 18th, 2016 Android Weekly Issue #236 本期内容包括: Google的物联网平台Android ...
- ExtJS 项目准备工作(一)
首先,需要从网上下载两个文件,一个是SenchaCmd-6.2.0-windows-64bit(我的电脑是window 10 64位) 另一个是ExtJs6的源码包(ext-6.0.0.415). 源 ...
- MongoDB学习笔记二—Shell操作
数据类型 MongoDB在保留JSON基本键/值对特性的基础上,添加了其他一些数据类型. null null用于表示空值或者不存在的字段:{“x”:null} 布尔型 布尔类型有两个值true和fal ...
- angularJS(5)
angularJS(5) 一,数据循环:特别要注意作用域 使用ng-repeat指令. <div ng-app="myApp" ng-controller="myC ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Spark笔记:RDD基本操作(下)
上一篇里我提到可以把RDD当作一个数组,这样我们在学习spark的API时候很多问题就能很好理解了.上篇文章里的API也都是基于RDD是数组的数据模型而进行操作的. Spark是一个计算框架,是对ma ...
- JS入门
1,undefined,NaN,Null,infinity 1) undefined 是undefined 类型 var a; //声明变量后不赋值 typeof 类型判断方法 console.log ...