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 相关文章推荐
jquery ajax修改全局变量示例代码
Nov 08 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
JS中Array数组学习总结
Jan 18 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
video.js使用改变ui过程
Mar 05 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 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
利用php绘制饼状图的实现代码
2013/06/07 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
Python3.2中Print函数用法实例详解
2015/05/19 Python
理解Python中的With语句
2016/03/18 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
销售总监工作职责
2013/11/21 职场文书
毕业生就业自荐信
2013/12/04 职场文书
初婚未育证明
2014/01/15 职场文书
保险公司晨会主持词
2014/03/22 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2014年教务处工作总结
2014/12/03 职场文书
建议书格式
2015/02/04 职场文书
新员工辞职信范文
2015/05/12 职场文书
公司庆典主持词
2015/07/04 职场文书
大学入学感言
2015/08/01 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python