JavaScript跨域调用基于JSON的RESTful API

2024-09-29 10:15:54

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的全部叙述，希望对大家有所帮助，如果大家想了解更多内容，敬请关注我们网站，谢谢！

Node.js配合node-http-proxy解决本地开发ajax跨域问题

情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 之类的(有的时候后端不方便这样处理,前端就蛋疼了) 3. 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题. 用到的技术:
JS JSOP跨域请求实例详解

在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu
详解AngularJS如何实现跨域请求

跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); $http.get(ur
NODE.JS跨域问题的完美解决方案

这几天公司同事(前端)写页面的时候一直说拿不到想要的JSON,安卓iOS那边是可以拿到的,但他也是新手也不知道为什么只知道是js跨域问题,然后问我我也不懂前端我开始百度, 有人说是谷歌浏览器跨域要设置一下,然后我就在谷歌浏览器的目标后面加一个 --disable-web-security 但是后来发现依然报错,依然拿不到想要的数据.后来也不停的找找找也没有什么眉目. 直到今天百度了一下PHP的跨域启发了我,于是百度找到了node.js的跨域问题,最后我在 app.js 路由设置里面加了一段跨域代
jquery ajax结合thinkphp的getjson实现跨域的方法

本文实例讲述了jquery ajax结合thinkphp的getjson实现跨域的方法.分享给大家供大家参考,具体如下: jquery中post的应该是不能跨域,网上说get的可以跨域,但是我试了一下也不行,然后就进行最后的拼搏getjson,结果成功,哈哈 js处写作: $.getJSON( "/index.php/Index/test", function(data){ alert(data.dd); } ); 语法: jQuery.getJSON(url,[data],[call
浅谈JQuery+ajax+jsonp 跨域访问

Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 一. 客户端 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=&q
Javascript 跨域知识详细介绍

JS跨域知识总结: 在"跨域"一词经常性地出现以前,我们其实已经频繁地使用它了.如在A网站的img,src指向B网站的某一图片地址,毫无疑问,这在通常情况下都是能正常显示的(且不论防盗链技术):同样,可以使script标签的src属性指向其它网站的脚本资源(在某些情况下甚至鼓励这样做,以便充分利用其它网站的负载优势,减小自身服务器的并发量).然而,如若使用js去主动请求其它网站的数据,比如ajax方式,就会遇到让人郁闷的跨域问题,这也是我们平常所说的跨域.由于安全原因,跨域访问是被各大
JSONP跨域请求实例详解

JSOP简介 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSON
JavaScript跨域调用基于JSON的RESTful API

1. 基本术语 AJAX(Asynchronous JavaScript And XML,异步JavaScript和XML):AJAX是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. JSON(JavaScript Object Notation):JSON是一种轻量级的数据交换格式,可以看成是由大括号包裹起来的多个"key/value"对,格式如下:{"f
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码

最近项目中需要跨域调用其他项目的数据,其他项目也是使用的EasyUI的datagrid组件,开始以为直接在datagrid的url属性定义为其他项目的url地址即可,可是测试下发现的确是返回了json数据但是json数据提示"invalid label" 错误,网上搜索了下错误解决办法,参考 "JavaScript处理Json的invalid label错误解决办法"的方法利用datagrid的loadData方法加载并转换了json还是提示上述错误,感觉原因不在格
json跨域调用python的方法详解

本文实例讲述了json跨域调用python的方法.分享给大家供大家参考,具体如下: 客户端: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
php跨域调用json的例子

JSON和XML没什么太大区别,不过JSON有一个更大范围的应用,那就是,跨域的数据调用.由于安全性问题,AJAX不支持跨域调用,这样要调用不同域名下的数据,很麻烦.下面这个例子,足以展示php用json如何进跨域调用了. index.html 复制代码代码如下: <script type="text/javascript"> function getProfile(str) { var arr = str; document.getElementBy
PHP json格式和js json格式 js跨域调用实现代码

先看一个js函数复制代码代码如下: function jsontest() { var json = [{'username':'crystal','userage':'20'},{'username':'candy','userage':'24'}]; alert(json[1].username); var json2 = [['crystal','20'],['candy','24']]; alert(json2[0][0]); } 这个函数,第一个alert(json[1].user
javascript跨域方法、原理以及出现问题解决方法（详解）

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实
详解JavaScript跨域总结与解决办法

什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象.更详细的说明可以看下表: URL 说明是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下允许
jquery ajax jsonp跨域调用实例代码

客户端代码复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
js跨域调用WebService的简单实例

步骤1. 在web.config中的system.web节点里加入  <webServices> <protocols> <add name="HttpPost"/> <add name="HttpGet"/> </protocols> </webServices> <!--此节点可允许脚本跨域调用webservic
javascript 跨域问题以及解决办法

javascript 跨域问题以及解决办法什么是跨域问题? 跨域这个问题是由于浏览器的同源策略引起的,请求的URL地址,必须与浏览器的URL是相同协议.相同域名.相同端口的,否则是不允许访问的浏览器URL 要访问的URL 结果 http://www.123.com/index http://www.123.com/server 成功 http://www.123.com/index http://www.456.com/server 域名不相同,跨域 http://www.123.com:8

JavaScript跨域调用基于JSON的RESTful API

相关推荐

随机推荐