跨域-jsonp

Posted 2022-04-02 superzwb

前端解决跨域问题

 

同源策略

　　同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前

　　Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从

　　Netscape Navigator 2.0 版本开始就存在

什么是JSONP？

　　JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript

　　callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）

JSONP有什么用？

　　由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过

　　script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求

如何使用JSONP?

　　在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回

　　调函数

Jsonp原理：

　　首先在客户端注册一个callback, 然后把callback的名字传给服务器。

　　此时，服务器先生成 json 数据。

　　然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

　　最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

　　客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的

　　callback 函数里.（动态执行回调函数）

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax(
　　url:"http://www.qcweb1.com/services.php",
　　dataType:‘jsonp‘,
　　data:‘‘,
　　jsonp:‘callback‘,
　　success:function(result) 
　　　　for(var i in result) 
　　　　alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
　　　　
　　,
　　timeout:3000
);
</script>

 

 

<?php
//服务端返回JSON数据$arr=array(‘a‘=>1,‘b‘=>2,‘c‘=>3,‘d‘=>4,‘e‘=>5);
　　$result=json_encode($arr);
　　//echo $_GET[‘callback‘].‘("Hello,World!")‘;
　　//echo $_GET[‘callback‘]."($result)";
　　//动态执行回调函数
　　$callback=$_GET[‘callback‘];
　　echo $callback."($result)";
?>

<script>
function kuayu(result)
    console.log(result);
    


</script>
<script src="http://web2.com/server.php?callback=kuayu"></script>

 

 

以下

1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进

行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动

态添加<script>标签来调用服务器提供的js脚本。

3、所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域

的数据的获取。

4、还有就是，jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你

愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。

总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变这一点！

 

后端解决跨域问题

 

通过设置Access-Control-Allow-Origin来实现跨域

 

1、允许单个域名访问

指定某域名（http://web1.com）跨域访问，则只需在http://server.web.com/server.php文件头部添加如下代码：

header(‘Access-Control-Allow-Origin:http://web1.com‘);

2、允许多个域名访问

指定多个域名（http://web1.com、http://web2.com等）跨域访问，则只需在http://server.web.com/server.php文件头部添加如下代码：

$origin = isset($_SERVER[‘HTTP_ORIGIN‘])? $_SERVER[‘HTTP_ORIGIN‘] : ‘‘;  
  
$allow_origin = array(  
    ‘http://client1.web1.com‘,  
    ‘http://client2.web2.com‘  
);  
  
if(in_array($origin, $allow_origin))  
    header(‘Access-Control-Allow-Origin:‘.$origin);       

3、允许所有域名访问

允许所有域名访问则只需在http://server.web.com/server.php文件头部添加如下代码：

header(‘Access-Control-Allow-Origin:*‘);