【笔记】Asp.Net WebApi对js POST带参数跨域请求的支持方案
先说下需求:在原来的WebApi项目中增加对js跨域的请求支持,请求方式:以POST为主,webapi路由规则根据原项目需求修改如下:
public static void Register(HttpConfiguration config)
{
// Web API configuration and services // Web API routes
config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
熟悉WebApi的猿猿们都知道这样设置路由规则直接导致了同一个controller中的不同方法的访问改由方法前的标签决定,而不是方法名来决定。
关于js跨域的原理如下:假设我们请求的地址A:http://api.xx.com/api/GetAllPeople,那如果在B页面 http://www.baidu.com/tlzzu.html中使用POST去调用外部接口的话,B页面会先向A地址发送一个OPTIONS类型(OPTIONS并不是webapi中的一个方法名,而是一种请求类型,类似POST、GET等)的预检请求(Preflight Request)只要对这种请求返回200就可以,具体内容不作检验。执行成功后会再次对A接口进行正常请求。返回数据。
解决办法:
如果是Asp.Net MVC或者是WebApi可进行如下设置:
1.先在Web.config中进行如下设置:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" /><add name="Access-Control-Allow-Headers" value="Origin,X-Requested-With,Content-Type,accept,key" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /></customHeaders>
</httpProtocol>
</system.webServer>
注意【Access-Control-Allow-Headers】属性,里面表示iis允许接受的headers的集合,如果没有key则不能在JQuery.ajax中使用beforeSend(或者headers:{"key":"11111"},)方法传递参数.如果在HTTP请求中会在请求头里加入其它属性,则一定要在
<add name="Access-Control-Allow-Headers" value="Origin,X-Requested-With,Content-Type,accept,key" />
中声明。
2.在Global.asax文件中设置:
protected void Application_BeginRequest(object sender, EventArgs e)
{
var req = System.Web.HttpContext.Current.Request;
if (req.HttpMethod == "OPTIONS")//过滤options请求,用于js跨域
{
Response.StatusCode = 200;
Response.SubStatusCode = 200;
Response.End();
}
}
用于过滤所有的OPTIONS请求
3.在B页面中进行如下请求:
$.ajax({
type: "POST",
contentType: "application/x-www-form-urlencoded",
url: "http://api.xx.com/api/GetAllPeople",
dataType: "json",
data:{DM:52,key:"11111"},
success: function (result) {
alert(JSON.stringify(result));
}
});
总结:
遇到问题是需要冷静,创建demo测试的时候demo需要干净,最好全过程重新创建。
另:
1.据说在apicontroller上添加[EnableCors]属性也可以进行跨域访问,不过我没找到,可参考下面文章:ASP.NET Web API自身对CORS的支持: EnableCorsAttribute特性背后的故事;
2.jsonp方式的请求只支持GET方式的请求,所以不能满足现在的需要(带参数的POST跨域请求);
【笔记】Asp.Net WebApi对js POST带参数跨域请求的支持方案的更多相关文章
- 原生JS实现Ajax的跨域请求
原生JS如何实现Ajax的跨域请求? 在解决这个问题之前,我们务必先清楚为什么我们要跨域请求,以及在什么情况下会跨域请求. 了解一下:“同源策略”,你就知道了: 同源策略限制从一个源加载的文档或脚本如 ...
- Vue2.0 vue-source.js jsonp demo vue跨域请求
以调用百度的输入提示接口为例 ===================================================================================== ...
- ajax-解决跨域请求(基于js,jQuery的josnp,设置响应头的cors)
同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...
- 【转载】Ajax JS 跨域请求
原文: 简单的ajax请求:http://blog.csdn.net/net_lover/article/details/5172509 复杂的ajax请求:http://blog.csdn.net/ ...
- Asp.Net Core WebAPI入门整理(三)跨域处理
一.Core WebAPI中的跨域处理 1.在使用WebAPI项目的时候基本上都会用到跨域处理 2.Core WebAPI的项目中自带了跨域Cors的处理,不需要单独添加程序包 3.使用方法简单 ...
- ASP.NET WebApi+Vue前后端分离之允许启用跨域请求
前言: 这段时间接手了一个新需求,将一个ASP.NET MVC项目改成前后端分离项目.前端使用Vue,后端则是使用ASP.NET WebApi.在搭建完成前后端框架后,进行接口测试时发现了一个前后端分 ...
- js便签笔记(13)——jsonp其实很简单【ajax跨域请求】
前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...
- js便签笔记(13)——jsonp事实上非常easy【ajax跨域请求】
前两天被问到ajax跨域怎样解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了很多资料,原来如此.. . 为何一直知道jsonp,但一直迷迷糊糊的不明 ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
随机推荐
- .NET 新标准介绍
本文介绍如何使用 .NET 标准,更容易地实现向 .NET Core 迁移.文中会讨论计划包含的 APIs,跨构架兼容性如何工作以及这对 .NET Core 意味着什么. 如果你对细节感兴趣,这篇文章 ...
- Hystrix框架2--超时
timeout 在调用第三方服务时有些情况需要对服务响应时间进行把控,当超时的情况下进行fallback的处理 下面来看下超时的案例 public class CommandTimeout exten ...
- struts1四:常用标签
struts1支持的5种标签: HTML 标签: 用来创建能够和Struts 框架和其他相应的HTML 标签交互的HTML 输入表单 Bean 标签: 在访问JavaBeans 及其属性,以及定义一个 ...
- Atiti 数据库系统原理 与数据库方面的书籍 attilax总结 v3 .docx
Atiti 数据库系统原理 与数据库方面的书籍 attilax总结 v3 .docx 1.1. 数据库的类型,网状,层次,树形数据库,kv数据库.oodb2 1.2. Er模型2 1.3. Sql2 ...
- C#开源日志Nlog入门
c#语言使用的日志比较多,比如:Log4.NLog等,今天我就简单随笔记录哈NLog的使用. 1.NLog的安装: 直接在VS编译器中打开程序包管理器,输入Install-Package NLogin ...
- Trace2:创建SQL Trace
Trace是轻量级的追踪工具,几乎对系统没有任何副作用,开启Trace,经常能够帮助DBA追踪到一些非常有用的信息.Trace出现的比较早,MS推出更强大的Extended Events来取代Trac ...
- Sql Server系列:自定义函数
用户自定义函数可以像系统函数一样在查询或存储过程中调用,可以接受参数.执行操作并将操作结果以值的形式返回.返回值可以是单个标量或结果集. 1. 标量函数 标量函数返回一个确定类型的标量值,对于多语句的 ...
- jQuery源码分析系列(40): 动画设计
前言 jQuery动画是通过animate这个API设置执行的,其内部也是按照每一个animate的划分封装了各自动画组的行为, 包括数据过滤.缓动公式.一些动画默认参数的设置.元素状态的调整.事件的 ...
- JavaScript 命名空间
<script type="text/javascript"> Namespace=new Object(); Namespace.register=function( ...
- javascript运动系列第七篇——鼠标跟随运动
× 目录 [1]眼球转动 [2]苹果菜单[3]方向跟随 前面的话 运动除了直线运动和曲线运动两种运动形式外,还有一种运动形式是鼠标跟随运动,而这种跟随运动需要用到三角函数的相关内容或者需要进行比例运算 ...