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 相关文章推荐
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
js实现购物车功能
Jun 12 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 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
Protoss魔法科技
2020/03/14 星际争霸
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
js实现数字每三位加逗号的方法
2015/02/05 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
Python中一行和多行import模块问题
2018/04/01 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
超市开学活动方案
2014/03/01 职场文书
模特大赛策划方案
2014/05/28 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
春节随笔
2015/08/15 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server