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 相关文章推荐
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
一个超简单的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
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
python 将md5转为16字节的方法
2018/05/29 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
Python matplotlib可视化实例解析
2020/06/01 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
综合实践活动方案
2014/02/14 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
中文教师求职信
2014/02/22 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
市场营销策划方案
2014/06/11 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL