没有合适的资源?快使用搜索试试~ 我知道了~
首页JavaScript跨域调用基于JSON的RESTful API
JavaScript跨域调用基于JSON的RESTful API
16 下载量 137 浏览量
更新于2023-03-03
评论
收藏 70KB PDF 举报
主要介绍了JavaScript跨域调用基于JSON的RESTful API的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
资源详情
资源评论
资源推荐
JavaScript跨域调用基于跨域调用基于JSON的的RESTful API
主要介绍了JavaScript跨域调用基于JSON的RESTful API的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
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);
weixin_38532629
- 粉丝: 5
- 资源: 921
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0