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 相关文章推荐
newxtree.js代码
Mar 13 Javascript
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
javascript 有用的脚本函数
May 07 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
python安装以及IDE的配置教程
2015/04/29 Python
Python3 replace()函数使用方法
2018/03/19 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
numpy.where() 用法详解
2019/05/27 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
大学生会计职业生涯规划范文
2014/02/28 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
起诉状范本
2015/05/20 职场文书
教导处教学工作总结
2015/08/12 职场文书
《打电话》教学反思
2016/02/22 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis