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 IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
js常用函数 不错
Sep 08 Javascript
json 定义
Jun 10 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
js 通用订单代码
Dec 23 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
爬虫利器Puppeteer实战
Jan 09 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中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python binascii 进制转换实例
2019/06/12 Python
django实现模型字段动态choice的操作
2020/04/01 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
电子商务网站的创业计划书
2014/01/05 职场文书
销售总经理岗位职责
2014/03/15 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
机械系毕业生求职信
2014/05/28 职场文书
暑假学习心得体会
2014/09/02 职场文书
投诉信格式范文
2015/07/02 职场文书
学生会干部任命书
2015/09/21 职场文书
七年级作文之雪景
2019/11/18 职场文书
mysql部分操作
2021/04/05 MySQL
MySQL数据库之存储过程 procedure
2022/06/16 MySQL