从前端和后端分析跨域(两种方法jsonp和cors)

  • 为什么会产生跨域?

          跨域是因为浏览器的安全策略:同源策略。服务器是没有做限制的

          请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同

 如下图

从前端和后端分析跨域(两种方法jsonp和cors)_第1张图片

  • jsonp方式

原理:有三个标签是不限制同源的分别是、type="text/css" rel="stylesheet" href="资源地址"、 。当链接的资源到达浏览器时,浏览器会根据他们的类型来采取不同的处理方式,比如,如果是css文件,则会进行对页面 repaint,如果是img 则会将图片渲染出来,如果是script 脚本,则会进行执行。jsonp方式就是利用了资源到达浏览器会被执行的特性,来达到跨域的目的的。

请看下边的例子

下面是原生js




    
    
    
    jsonp






服务端(以php为例)

header('Content-type:application/json'); //注意一定要设置数据类型为json 不然js解析失败
$json = ['age'=>100,'name'=>'yuanfang'];
return 'callbackFun'.'('.json_encode($json).')';  //这里的callbackFun要与前端回调执行函数一致

因为我用的是laravel框架所以附上laravel demo 

$json = ['age'=>100,'name'=>'yuanfang'];
$data = 'callbackFun'.'('.json_encode($json).')';
return response($data,200)->header('Content-type','application/json');

下面是以jq为例演示




    
    
    
    ajax
    







从前端和后端分析跨域(两种方法jsonp和cors)_第2张图片

图片上可以看到ajax回调函数callbackFun和success都被执行了,并且是先执行callbackFun,下边看另外一个例子

可以看到当我们在callbackFun中对返回值做了修改的话success中值会显示变化后的值,并且执行到alert的时候如果我们不点确定,后边success并不会执行,这说明ajax回调是同步执行的。

另外说点其他的,因为jsonp跨域是依赖于

你可能感兴趣的:(ajax)