基于.Net Framework 4.0 Web API开发(5):ASP.NET Web APIs AJAX 跨域请求解决办法(CORS实现)
概述:
ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作。但是在使用API的时候总会遇到跨域请求的问题,
特别各种APP万花齐放的今天,API的跨域请求是不能避免的。
在默认情况下,为了防止CSRF跨站的伪造攻击(或者是 javascript的同源策略(Same-Origin Policy)),一个网页从另外一个域获取数据时就会收到限制。有一些方法可以突破这个限制,那就是大家熟知的JSONP,
当然这只是众多解决方法中一种,由于JSONP只支持GET的请求,如今的复杂业务中已经不能满足需求。而CORS(Cross Origin Resource Sharing https://www.w3.org/wiki/CORS)跨域资源共享,是一种新的header规范,
可以让服务器端放松跨域的限制,可以根据header来切换限制或者不限制跨域请求。重要的是它支持所有http请求方式。
问题:
XMLHttpRequest 跨域 POST或GET请求 ,请求方式会自动变成OPTIONS的问题。
由于CORS(cross origin resource share)规范的存在,浏览器会首先发送一次options嗅探,同时header带上origin,判断是否有跨域请求权限,服务器响应access control allow origin的值,
供浏览器与origin匹配,如果匹配则正式发送post请求,即便是服务器允许程序跨域访问,若不支持 options 请求,请求也会死掉。
原因:
浏览器为了安全起见,会Preflighted Request的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法,以及不同类型的主题内容,也就是会先发送一个 options 请求,
问问服务器是否会正确(允许)请求,确保请求发送是安全的。
出现 OPTIONS 的情况一般为:
1、非GET 、POST请求
2、POST请求的content-type不是常规的三个:application/x- www-form-urlencoded(使用 HTTP 的 POST 方法提交的表单)、multipart/form-data(同上,但主要用于表单提交时伴随文件上传的场合)、text/plain(纯文本)
3、POST请求的payload为text/html
4、设置自定义头部
OPTIONS请求头部中会包含以下头部:Origin、Access-Control-Request-Method、Access-Control-Request-Headers,发送这个请求后,服务器可以设置如下头部与浏览器沟通来判断是否允许这个请求。
Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers
解决方法:
方法一:
此方法功能强大,可以解决ASP.NET Web API复杂跨域请求,携带复杂头部信息,正文内容和授权验证信息
public class CrosHandler : DelegatingHandler
{
private const string _origin = "Origin";
private const string _accessControlRequestMethod = "Access-Control-Request-Method";
private const string _accessControlRequestHeaders = "Access-Control-Request-Headers";
private const string _accessControlAllowOrigin = "Access-Control-Allow-Origin";
private const string _accessControlAllowMethods = "Access-Control-Allow-Methods";
private const string _accessControlAllowHeaders = "Access-Control-Allow-Headers"; protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, System.Threading.CancellationToken cancellationToken)
{
bool isCrosRequest = request.Headers.Contains(_origin);
bool isPreflightRequest = request.Method == HttpMethod.Options;
if (isCrosRequest)
{
Task<HttpResponseMessage> taskResult = null;
if (isPreflightRequest)
{
taskResult = Task.Factory.StartNew<HttpResponseMessage>(() =>
{
HttpResponseMessage response = new HttpResponseMessage(System.Net.HttpStatusCode.OK);
response.Headers.Add(_accessControlAllowOrigin, request.Headers.GetValues(_origin).FirstOrDefault());
string method = request.Headers.GetValues(_accessControlRequestMethod).FirstOrDefault();
if (method != null)
{
response.Headers.Add(_accessControlAllowMethods, method);
}
string headers = string.Join(", ", request.Headers.GetValues(_accessControlRequestHeaders));
if (!string.IsNullOrEmpty(headers))
{
response.Headers.Add(_accessControlAllowHeaders, headers);
}
return response;
}, cancellationToken);
}
else
{
taskResult = base.SendAsync(request, cancellationToken)
.ContinueWith<HttpResponseMessage>(t =>
{
var response = t.Result;
response.Headers.Add(_accessControlAllowOrigin, request.Headers.GetValues(_origin).FirstOrDefault());
return response;
});
}
return taskResult;
//return base.SendAsync(request, cancellationToken);
}
else
{
return base.SendAsync(request, cancellationToken);
}
}
}
protected void Application_Start()
{
IOCConfig.RegisterAll(); AreaRegistration.RegisterAllAreas(); WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles); GlobalConfiguration.Configuration.MessageHandlers.Add(new CrosHandler());
}
方法二:
配置文件中添加如下配置,此方法简单,应对简单的跨域请求
<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,OPTIONS" />
</customHeaders>
</httpProtocol>
<system.webServer>
参考文献:
https://code.msdn.microsoft.com/windowsdesktop/Implementing-CORS-support-a677ab5d#content
基于.Net Framework 4.0 Web API开发(5):ASP.NET Web APIs AJAX 跨域请求解决办法(CORS实现)的更多相关文章
- vue-cli开发时,ajax跨域详细解决办法
在config/index.js中进行如下配置 [即在进行ajax请求时,地址中任何以/api开头的请求地址都被解析为目标地址,target就是你想要的后台接口地址] proxyTable: { '/ ...
- $.ajax 跨域请求 Web Api
WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...
- ASP.NET Web API 框架研究 ASP.NET Web API 路由
ASP.NET Web API 核心框架是一个独立的.抽象的消息处理管道,ASP.NET Web API有自己独立的路由系统,是消息处理管道的组成部分,其与ASP.NET路由系统有类似的设计,都能找到 ...
- 关于ajax跨域请求API数据的一些问题
一般来说我们使用jquery的ajax来跨域请求API数据的时候每次请求,就只能请求一组数据,而且当我们再次点击发送ajax请求的时候,新请求的数据会覆盖掉原来的数据,那么如何每次在请求的数据的时候, ...
- ASP.net Web API允许跨域访问解决办法
来源 http://blog.csdn.net/wxg_kingwolfmsncn/article/details/48545099 遇到此跨域访问问题,解决办法如下: 方法一: 1. 在we ...
- web api :Routing in ASP.NET Web API
引 Web API 和SignalR都是在服务层. If you are familiar with ASP.NET MVC, Web API routing is very similar to M ...
- Vue应用请求SpringBoot API出现 CORS 跨域请求设置 Invalid CORS request错误
1.全局配置 在application.java文件添加CorsRegistry配置 package com.ypnh.authority; import com.ypnh.authority.inf ...
- asp web api json 序列化后 把私有字段信息也返回了解决办法
serialization returns private properties Are your types marked as [Serializable]? Serializable means ...
- asp.net core 创建允许跨域请求的api, cors.
配置应用方域名. 在webapi中引用cors包,在startup的Configure\ConfigServices中增加启动项配置,在api中增加EnableCors的Attribute属性.即可. ...
随机推荐
- Visual Studio 2015速递(3)——ASP.NET 新特性
系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...
- Mac配置Qt环境——Could not resolve SDK path for 'macosx10.8'
前言:解决在Mac端安装Qt后,出现的Could not resolve SDK path for 'macosx10.8'的配置信息. 首先,发现问题之前,先搜索一下.但是搜索的结果都是说,找到配置 ...
- Redmine与Windows AD集成设置
Redmine的账号支持跟LDAP集成,以下是在WINDOWS AD账号的集成配置过程. 首先下载一个微软的dsquery.exe工具,用来查询自己的账户信息. C:\WINDOWS>dsque ...
- telnet小结
几百年前就开始听说telnet了,却直到最近才真正完全搞懂!... http://www.cnblogs.com/wusthjp/archive/2012/01/05/2312975.html 可能要 ...
- memcache和redis区别
memcache官方定义 Free & open source, high-performance, distributed memory object caching system, gen ...
- Atitit html5 Canvas 如何自适应屏幕大小
Atitit html5 Canvas 如何自适应屏幕大小 可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS 1 2 3 4 5 6 7 $(window).resize ...
- web应用程序性能优化
web应用程序基本上都是在浏览器地址栏输入一段网站,然后进入,最后浏览器显示你想要的东西. 这就是用户所能体会到的东西.那作为程序员我们看到了什么呢? 一次HTTP 请求主要的流程是: 1.DNS服务 ...
- SQL SERVER 查询性能优化——分析事务与锁(五)
SQL SERVER 查询性能优化——分析事务与锁(一) SQL SERVER 查询性能优化——分析事务与锁(二) SQL SERVER 查询性能优化——分析事务与锁(三) 上接SQL SERVER ...
- Spring Cloud 配置服务
Spring Cloud 配置服务 1. 配置服务简介 产生背景: 传统开发中,我们通常是将系统的业务无关配置(数据库,缓存服务器)在properties中配置,在这个文件中不会经常改变,但随着系统规 ...
- 理解Docker容器的进程管理
摘要: Docker在进程管理上有一些特殊之处,如果不注意这些细节中的魔鬼就会带来一些隐患.另外Docker鼓励"一个容器一个进程(one process per container)&qu ...