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)”这行代码之后,需要增加如下几行内容

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

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

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

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

② 客户端

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

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

contentType规定了编码格式是UTF8;

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

具体的调用代码如下:

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

原文链接:https://www.f2er.com/js/47370.html

猜你在找的JavaScript相关文章