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 相关文章推荐
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
jquery中post方法用法实例
Oct 21 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
js实现每日签到功能
Nov 29 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
PHP注释实例技巧
2008/10/03 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
微信小程序实现watch监听
2020/06/04 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python调用C语言开发的共享库方法实例
2015/03/18 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
如何利用python查找电脑文件
2018/04/27 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
python实现mean-shift聚类算法
2020/06/10 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
python两种注释用法的示例
2020/10/09 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
中职应届生会计求职信
2013/10/23 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
小爸爸观后感
2015/06/15 职场文书
运动会1000米加油稿
2015/07/21 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS