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 AccessControlAllowOrign = "Access-Control-Allow-Origin";

private const string AccessControlAllowMethods = "Access-Control-Allow-Methods";

private const string AccessControlAllowHeaders = "Access-Control-Allow-Headers";

private const string AccessControlAllowCredentials = "Access-Control-Allow-Credentials";

protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)

{

bool isCrosRequest = request.Headers.Contains(Origin);

bool isPrefilightRequest = request.Method == HttpMethod.Options;

if (isCrosRequest)

{

Task<HttpResponseMessage> taskResult = null;

if (isPrefilightRequest)

{

taskResult = Task.Factory.StartNew<HttpResponseMessage>(() =>

{

HttpResponseMessage response = new HttpResponseMessage(System.Net.HttpStatusCode.OK);

response.Headers.Add(AccessControlAllowOrign,

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.IsNullOrWhiteSpace(headers))

{

response.Headers.Add(AccessControlAllowHeaders, headers);

}

response.Headers.Add(AccessControlAllowCredentials, "true");

return response;

}, cancellationToken);

}

else

{

taskResult = base.SendAsync(request, cancellationToken).ContinueWith<HttpResponseMessage>(t =>

{

var response = t.Result;

response.Headers.Add(AccessControlAllowOrign,

request.Headers.GetValues(Origin).FirstOrDefault());

response.Headers.Add(AccessControlAllowCredentials, "true");

return response;

});

}

return taskResult;

}

return base.SendAsync(request, cancellationToken);

}

}

使用方式,在Global.asax文件添加

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>

WebApi Ajax 跨域请求解决方法(CORS实现)相关推荐

  1. 第114天:Ajax跨域请求解决方法(二)

    一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js   http:// (协议号)       www  (子 ...

  2. Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案

    Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案 参考文章: (1)Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录 ...

  3. ajax跨域请求 html5,HTML5中使用postMessage实现Ajax跨域请求的方法

    由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等. 常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建 ...

  4. axios请求跨域前端解决_Vue中axios跨域请求解决方法

    跨域:指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,浏览器执行 js 脚本时,会检查这个脚本属 ...

  5. php No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax跨域访问解决方法

    微信小程序开发交流qq群   173683895    承接微信小程序开发.扫码加微信. 在PHP请求头加上 header("Access-Control-Allow-Origin: *&q ...

  6. ajax跨域请求Jsonp实现,使用jsonp实现ajax跨域请求

    Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example ...

  7. ajax跨域请求jsp数据

    最近的开发中,应工作需要,把java代码在了jsp上,而且还需要通过ajax跨域请求这个方法,并且返回数据.遇到了跨域请求 以及contentType错误,我把我的代码贴出,供大家参考. html页面 ...

  8. 本地主机作服务器解决AJAX跨域请求访问数据的方法

    本地主机作服务器解决AJAX跨域请求访问数据的方法 参考文章: (1)本地主机作服务器解决AJAX跨域请求访问数据的方法 (2)https://www.cnblogs.com/QiScript/p/5 ...

  9. ajax请求时拒绝访问,ajax跨域请求js拒绝访问的解决方法

    ajax跨域请求js拒绝访问的解决方法 内容精选 换一换 可能原因kubelet服务没有运行或运行异常.kubelet服务没有运行或运行异常.解决方法可以通过systemctl status kube ...

最新文章

  1. Jenkins Pipeline构建流水线发布
  2. 2-AII--BroadcastReceiver有序广播
  3. python之蓝图blueprint浅析
  4. UVA 10167 - Birthday Cake
  5. 20145106 《Java程序设计》第10周学习总结
  6. 1091 N-自守数 (15 分)
  7. 流程控制语句(bash)
  8. 修改FTP服务器端口后无法访问
  9. FMDB(FMDatabase)--SQLite的封装
  10. 【clickhouse】clickhouse强大智能的 Projection (投影) 功能
  11. “波斯公主选驸马”问题的理论分析和数学推导
  12. vscode快速下载方法
  13. 论组织管理-EMBA课程小记
  14. win10磁盘管理_一步一步的详细讲解Win10磁盘分区教程
  15. python学习 - 多个npy文件的合并和读取 | numpy array
  16. 道路匹配MapMatching:GPS轨迹点常用聚类算法介绍(K-Means聚类、蚁群算法等)
  17. 红警2共和国之辉如何打7冷酷
  18. 真正解决layer弹层遮罩挡住窗体的问题
  19. 中国金色系列珠光颜料市场深度研究分析报告
  20. Kepware与smart200建立连接

热门文章

  1. opencv图像仿射变换和普通旋转
  2. Linux C 读取文件夹下所有文件(包括子文件夹)的文件名
  3. 最优化课堂笔记05——一维最优化方法(含重点:黄金分割法)
  4. 多类线性分类器算法原理及代码实现 MATLAB
  5. RC电路输出波形的时域与频域分析
  6. 计算机控制学什么,计算机控制技术专业介绍
  7. qmenu只在鼠标单击时消失_两种方法解决win10电脑无法使用无线鼠标问题
  8. c#数据库訪问返回值类型为SqlDataReader时使用using时注意的问题
  9. Python 抓取数据存储到Mysql中
  10. Spring积累总结