jQuery.ajax 跨域请求webapi设置headers的解决方案


Posted in Javascript onAugust 08, 2016

解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现。

1.第一步 服务端设置响应头,在webapi的web.config做如下设置

<system.webServer>
<httpProtocol>
<!--跨域配置开始-->
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" /><!--支持全域名访问,不安全,部署后需要固定限制为客户端网址-->
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /><!--支持的http 动作-->
<add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" /><!--响应头 请按照自己需求添加 这里新加了token这个headers-->
<add name="Access-Control-Request-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /><!--允许请求的http 动作-->
</customHeaders>
<!--跨域配置结束-->
</httpProtocol>

2.第二部 了解IE chrome 等浏览器 对于 跨域请求并要求设置Headers自定义参数的时候的 "预请求" 就是如果遇到 跨域并设置headers的请求,所有请求需要两步完成!

A 第一步:发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 一般使用202响应即可 不用返回任何内容信息。(能看到这份手稿的人,本人不相信你后台处理不了一个options请求)options请求可在权限拦截器中处理

/// <summary>
/// 权限拦截器
/// </summary>
public class ApiAuthorizeAttribute : AuthorizeAttribute
{
public override void OnAuthorization(HttpActionContext actionContext)
{
if (actionContext.Request.Method == HttpMethod.Options)
{
actionContext.Response = actionContext.Request.CreateResponse(HttpStatusCode.Accepted);
return;
}
}
}

B 第二步:服务器accepted 第一步请求后 浏览器自动执行第二步 发送真正的请求。

客户端代码:

$("#btnSumit").click(function () {
var Ticket = $.cookie("token");
var model = {
id: 1
};
$.ajax({
type: "POST",
url: "http://localhost:65312/api/products/FindProductById",
data: JSON.stringify(model),
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function (xhr) {
// //发送ajax请求之前向http的head里面加入验证信息
xhr.setRequestHeader("token", Ticket); // 请求发起前在头部附加token
},
success: function (data, status) {
if (data.statuscode == "401") {
alert(data.msg);
}
else
{
alert(JSON.stringify(data))
}
},
//error: function (XMLHttpRequest, textStatus, errorThrown) {
// alert(XMLHttpRequest.status);
// alert(XMLHttpRequest.readyState);
// alert(textStatus);
//},
complete: function () {
}
});
});

以上所述是小编给大家介绍的jQuery.ajax 跨域请求webapi设置headers解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
js实现表格筛选功能
Jan 18 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 #Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 #Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 #Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 #Javascript
用js读写cookie的简单方法(推荐)
Aug 08 #Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 #Javascript
js中遍历Map对象的简单实例
Aug 08 #Javascript
You might like
AM/FM收音机的安装与调试
2021/03/02 无线电
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
php 问卷调查结果统计
2015/10/08 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
python实现汉诺塔算法
2021/03/01 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
党员教师工作决心书
2014/03/13 职场文书
运输服务质量承诺书
2014/03/27 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
设备技术员岗位职责
2015/04/11 职场文书
法律进社区活动总结
2015/05/07 职场文书
拉贝日记观后感
2015/06/05 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python