同源策略和Jsonp跨域请求解析

Json 前端之家
前端之家收集整理的这篇文章主要介绍了同源策略和Jsonp跨域请求解析，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1. Ajax不能跨域请求的原因

同源策略(Same Origin Policy)，是一种约定，该约定阻止当前脚本获取或者操作另一个域下的内容。所有支持Javascript的浏览器都支持同源策略，也就是说浏览器可以隔离来自不同源的内容，阻止跨域请求的发生。

通俗的说法就是,A服务器的a端口下执行的普通ajax程序,不能访问B服务器或A服务器的其他端口,是一种隔离策略.但对于标签下的'src'属性无效,因为这个属性就是请求其他服务器的,所以可以利用<script>的src属性请求域外服务器:

<script type="text/javascript" src="www.baidu.com/test.js"></script>

ajax在跨域请求时需要借助jsonp格式

2.解决方法

(1)CORS

在被请求的脚本中使用header()函数设置http响应，从而使得跨域请求能够发生:

header(“Access-Control-Allow-Origin:*”);

这一方法称为CORS(Cross-Origin Resource Sharing)，是w3c的工作草案。

(2) 使用Jsonp (Json with padding)

jsonp的原理是通过script标签的src属性来请求不同源的脚本。

步骤：

1)创建script标签，设置src属性

2)定义回调函数

3)在被请求的PHP脚本中执行回调函数

4)在回调函数中处理返回数据

发送跨域请求的html页面:

 1 <script type="text/javascript">
 2     function crossDomain()  3  {  4         //1.创建script标签，设置src属性
 5         var script = document.createElement('script');  6         在script标签的src属性中发送跨域请求
 7         传递get参数 --> 回调函数的名字
 8         script.src = 'http://www.another.com/index.PHP?name=Jonas&callback=say';  9         document.getElementsByTagName('head')[0].appendChild(script); 10  } 11 
12     2.定义回调函数
13     function say(data) 14  { 15         4.处理返回数据
16  console.log(data); 17  } 18 </script>

接收跨域请求的PHP页面:要执行回调函数

1 <?PHP 2 3.执行回调函数，将返回数据以参数的形式传给回调函数
3 $data = json_encode(array('msg' => 'hello world')); 4 echo $_GET['callback'] . "({$data})"; 5 ?>

同源策略

　　"Permission denied to call method XMLHttpRequest.open"为什么会出这样的错误呢？这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释：

　　同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。

　　这就是引起为何取不到数据的原因了，那如何才能解决跨域的问题呢？没错，我们现在可以进入正题，来了解下什么是JSONP了。

JSON和JSONP

　　JSONP和JSON好像啊，他们之间有什么联系吗？

　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧，不是很清楚的朋友可以去json.org上了解下，简单易懂。

　　JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。--来源百度

　　JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)， 我们先看下面的小例子然后再详细介绍。

跨域的简单原理

　　光看定义还不是很明白，那首先我们先来手动做个简单易懂的小测试。新建一个asp.net的web程序，添加sample.html网页和一个test.js文件，代码如下：

sample.html的代码：

@H_403_311@ 
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 html xmlns="http://www.w3.org/1999/xhtml" 3 head4     title>test</5     ="test.js"6 7 body8 9 html>
@H_403_311@

test.js的代码：

1 alert("success");

　　打开sample.html后会跳出"success”这样的这样的信息框，这似乎并不能说明什么，跨域问题到底怎么解决呢？好，现在我们模拟下非同源的环境，刚才我们不是已经用Visual Studio新建了一个Web程序吗(这里我们叫A程序)，现在我们再打开一个新的Visual Studio再新建一个Web程序(B程序)，将我们的之前的test.js文件从A程序中移除然后拷贝到B程序中。两个程序都运行起来后，Visual Studio会启动内置服务器，假设A程序是localhost:20001,B程序是localhost:20002，这就模拟了一个非同源的环境了(虽然域名相同但端口号不同，所以是非同源的)。

　　OK，我们接下来应该改下sample.html里的代码，因为test.js文件在B程序上了，url也就变成了localhost:20002。

sample.html部分代码：

="http://localhost:20002/test.js">

　　请保持AB两个Web程序的运行状态，当你再次刷新localhost:20001/sample.html的时候，和原来一样跳出了"success"的对话框，是的，成功访问到了非同源的localhost:20002/test.js这个所谓的远程服务了。到了这一步，相信大家应该已经大概明白如何跨域访问了的原理了。

　　<script>标签的src属性并不被同源策略所约束，所以可以获取任何服务器上脚本并执行。

JSONP的实现模式--CallBack

　　刚才的小例子讲解了跨域的原理，我们回上去再看看JSONP的定义说明中讲到了javascript callback的形式。那我们就来修改下代码，如何实现JSONP的javascript callback的形式。

程序A中sample的部分代码：

="text/javascript">@H_348_404@ //回调函数function@H_348_404@ callback(data) { 4 @H_348_404@ alert(data.message); 5 @H_348_404@} 程序B中test.js的代码：

//调用callback函数，并以json数据形式作为阐述传递，完成回调 2 callback({message:"success"});

　　这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

　　将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义吧。

　　一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了。

1 2 3 @H_348_404@ alert(data.message); 4 5 添加<script>标签的方法 6 addScriptTag(src){ 7 var@H_348_404@ script @H_348_404@=@H_348_404@ document.createElement(@H_348_404@'@H_348_404@script@H_348_404@); 8 @H_348_404@ script.setAttribute(@H_348_404@"@H_348_404@type@H_348_404@,@H_348_404@text/javascript 9 @H_348_404@ script.src @H_348_404@ src; 10 @H_348_404@ document.body.appendChild(script); 11 12 @H_348_404@ 13 @H_348_404@ window.onload @H_348_404@= (){ 14 @H_348_404@ addScriptTag(@H_348_404@http://localhost:20002/test.js15 @H_348_404@ } 16 　　程序B的test.js代码不变，我们再执行下程序，是不是和原来的一样呢。如果我们再想调用一个远程服务的话，只要添加addScriptTag方法，传入远程服务的src值就可以了。这里说明下为什么要将addScriptTag方法放入到window.onload的方法里，原因是addScriptTag方法中有句document.body.appendChild(script);，这个script标签是被添加到body里的，由于我们写的javascript代码是在head标签中，document.body还没有初始化完毕呢，所以我们要通过window.onload方法先初始化页面，这样才不会出错。

　　上面的例子是最简单的JSONP的实现模型，不过它还算不上一个真正的JSONP服务。我们来看一下真正的JSONP服务是怎么样的，比如Google的ajax搜索接口：http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?

　　q=?这个问号是表示你要搜索的内容，最重要的是第二个callback=?这个是正如其名表示回调函数的名称，也就是将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。有点罗嗦了，还是看看实现代码吧：

3 4 5 6 7 11 搜索apple，将自定义的回调函数名result传入callback参数中http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result@H_348_404@ 15 自定义的回调函数result16 result(data) { 17 我们就简单的获取apple搜索结果的第一条记录中url数据18 @H_348_404@ alert(data.responseData.results[@H_348_404@0@H_348_404@].unescapedUrl); 19 20
像这样的JSONP服务还有很多(以下信息来自使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup)：

Digg API：来自 Digg 的头条新闻：

　　http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?

Geonames API：邮编的位置信息：

　　http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?

Flickr JSONP API：载入最新猫的图片：

　　http://api.flickr.com/services/Feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

Yahoo Local Search API：在邮编为 10504 的地区搜索比萨：

　　http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=json&callback=?

　　接下来我们自己来创建一个简单的远程服务，实现和上面一样的JSONP服务。还是利用Web程序A和程序B来做演示，这次我们在程序B上创建一个MyService.ashx文件。

程序B的MyService.ashx代码：

1 public class MyService : IHttpHandler 2 { 3 void ProcessRequest(HttpContext context) 4 { 5 获取回调函数名 6 string callback = context.Request.QueryString["callback"]; 7 json数据 8 string json = {\"name\":\"chopper\",\"sex\":\"man\"}"; 9 10 context.Response.ContentType = application/json11 输出：回调函数名(json数据)12 context.Response.Write(callback + (" + json + )"); 13 } 14 15 bool IsReusable 16 { 17 get 18 { 19 return false; 20 } 21 } 22 } @H_403_311@ 程序A的sample代码中的调用：

4 10 调用远程服务11 http://localhost:20002/MyService.ashx?callback=person14 回调函数person person(data) { 16 alert(data.name + is a " + data.sex); 17 18 >　　
　　这就完成了一个最基本的JSONP服务调用了，是不是很简单，下面我们来了解下JQuery是如何调用JSONP的。

jQuery对JSONP的实现

　　jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法(详细可以参考http://api.jquery.com/jQuery.getJSON/)。那我们就来修改下程序A的代码，改用jQuery的getJSON方法来实现(下面的例子没用用到向服务传参，所以只写了getJSON(url,[callback]))：

="http://code.jquery.com/jquery-latest.js" $.getJSON(@H_348_404@http://localhost:20002/MyService.ashx?callback=?(data){ alert(data.name @H_348_404@ is a a@H_348_404@ data.sex); }); 　　结果是一样的，要注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个问号是内部自动生成的一个回调函数名。这个函数名大家可以debug一下看看，比如jQuery17207481773362960666_1332575486681。

　　当然，加入说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？我们可以使用$.ajax方法来实现(参数较多，详细可以参考http://api.jquery.com/jQuery.ajax)。先来看看如何实现吧：

$.ajax({ url:404@jsonp404@person(data){ alert(data.name @H_348_404@ data.sex); } }); 　　没错，jsonpCallback就是可以指定我们自己的回调方法名person，远程服务接受callback参数的值就不再是自动生成的回调名，而是person。dataType是指定按照JSOPN方式访问远程服务。

　　利用jQuery可以很方便的实现JSONP来进行跨域访问。

猜你在找的Json相关文章

jsonp
　　jsonp需要在页面中添加一个<script>元素，由该元素来从其他服务器加载json数据。...
jsonp跨域
<script> var testApi = "地址"; $.ajax({ url:testApi,//可以不是本地域名...
MVC上的jsonp扩展，解决跨域访问问题
总是有人会遇到跨域问题，然后有个jsonp的解决方案，MVC中代码如下： public class JsonpR...
fastjson反序列化json对象时保留null值的key
最近开发中遇到调用第三方web_api的功能，后端在处理json数据时使用fastjson来做反序列化，...
JsonCpp 的使用
JSON全称为JavaScript ObjectNotation，它是一种轻量级的数据交换格式，易于阅读、编写、解...
jsonp
var newScript = document.createElement(‘script‘); newScript.setAtt...
jsonp 跨域
$.ajax({ url:"http://192.168.100.47:8080/ais-connect/data/newai...
JSONArray 去重
前台说 只能传给我这样的数据 [     {         "labelName":"皮肤颜...
FastJson的坑
1.list中放入同一个对象，会出现内存地址引用{"$ref":"#[0]"}，后台可以识...
fastJson转换对象与字符串
static class TempClass{ private String name; private int age; public String getName(...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作