JavaScript跨域调用基于JSON的RESTful API


Posted in Javascript onJuly 09, 2016

1. 基本术语

AJAX(Asynchronous JavaScript And XML,异步JavaScript和XML):AJAX是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

JSON(JavaScript Object Notation):JSON是一种轻量级的数据交换格式,可以看成是由大括号包裹起来的多个"key/value"对,格式如下:{"firstName":"Brett", "lastName":"McLaughlin", "email":"abcdefg@gmail.com"}。

Cross Domain(跨域):跨域问题是由于JavaScript语言安全限制中的同源策略造成的,当在页面上使用AJAX请求访问其他服务器的数据时,客户端就会出现跨域问题。

Same Origin Policy(同源策略):同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,域名、协议、端口均相同,即是同源。

2. JavaScript跨域解决方案

目前主要有三种JavaScript跨域解决方案:

基于iframe实现跨域:两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是HTTP)和同一端口(例如都是80)。iframe方案对域名、协议、端口的限制太多,用处不大。

基于Script标签实现跨域(JSONP方案):JSONP(JSON with Padding)是JSON的一种“使用模式”,是一种非官方的跨域数据交互协议,可用于解决主流浏览器的跨域数据访问的问题。JSONP方案的局限性在于:JSONP只能实现GET请求。

基于后台代理实现跨域(CORS方案):CORS(Cross-Origin Resource Sharing,跨域资源共享)是一个W3C标准,它允许浏览器向跨源服务器发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

3. 基于后台代理实现跨域(CORS方案)

具体解决方案如下:

① 服务器端

服务器端需要在正常的HTTP回应中增加Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等字段。

我的服务器端是用Python写的,HTTP请求调用的webob.Request。

修改办法是,在“res = req.get_response(self.app)”这行代码之后,需要增加如下几行内容:

res.headerlist.append(('Access-Control-Allow-Origin', '*')) 
res.headerlist.append(('Access-Control-Allow-Methods', 'GET, POST')) 
res.headerlist.append(('Access-Control-Max-Age', '3600')) 
res.headerlist.append(('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Max-Age, X-Auth-Token, Content-Type, Accept'))

其中,Access-Control-Allow-Origin最好限制为前端的访问地址,这样才相对安全,例如:

res.headerlist.append(('Access-Control-Allow-Origin', 'http://10.111.121.26:8080'))

另外,Access-Control-Max-Age可以设置CORS相关配置的缓存时间,这样客户端就不必每次都先进行一次预检请求(Preflight Request)。

预检请求会先向服务器端发出一个OPTIONS方法、包含“Origin”头的请求。只有该请求获得允许以后,才会发起真实的跨域请求。

所以,服务器端在对X-Auth-Token进行鉴权时还需要放过预检请求,例如:

def process_request(self, req): 
if (req.headers.get('X-Auth-Token') != 'open-sesame') and (req.method != 'OPTIONS'): 
return exc.HTTPForbidden()

② 客户端

HTTP请求需要注意到几个地方:

data需要保证是JSON格式的字符串;

contentType规定了编码格式是UTF8;

dataType规定了返回内容是JSON格式。

具体的调用代码如下:

data_param = {"timeType":"LAST_7_DAYS", "hostType":"ALL_HOSTS"} 
$.ajax({ 
url:"http://172.16.17.11:41128/dpi/webApp/eventRetrieve", 
type: "POST", 
data:JSON.stringify(data_param), 
headers:{ 
"X-Auth-Token":"open-sesame", 
"Content-Type":"application/json" 
}, 
contentType: 'text/html; charset=UTF-8', 
dataType: "json", 
success: function(data) { 
alert(data); // Object 
}, 
error: function(XMLHttpRequest, textStatus, errorThrown) { 
alert(XMLHttpRequest.status); 
alert(XMLHttpRequest.readyState); 
alert(textStatus); 
}, 
complete: function(XMLHttpRequest, textStatus) { 
} 
});

以上所述是小编给大家介绍的JavaScript跨域调用基于JSON的RESTful API的全部叙述,希望对大家有所帮助,如果大家想了解更多内容,敬请关注三水点靠木网站,谢谢!

Javascript 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
javascript的this关键字详解
May 20 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 #Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 #Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 #Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 #Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 #Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 #Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 #Javascript
You might like
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
PHP缓冲区用法总结
2016/02/14 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
python处理按钮消息的实例详解
2017/07/11 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
strstr()的简单实现
2013/09/26 面试题
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
电子商务专业个人的自我评价
2013/11/19 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
环保建议书400字
2014/05/14 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
教师节表彰会主持词
2015/07/06 职场文书
银行服务理念口号
2015/12/25 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书