全国咨询/投诉热线:400-618-4000

同源跨域

更新时间:2019年01月10日14时02分 来源:传智播客 浏览次数:

  同源:同一个域名下不同文件或文件夹之间的访问

  跨域:不同域名下之间文件或文件夹之间的访问

  通用的一个跨域策略叫jsonp,但不仅仅是jsop能实现跨域,使用iframe,window.name,src,json都可以实现跨域

  cors toggle谷歌插件打开可以忽略跨域,仅仅测试使用.

  跨域的两种方式

  1. 客户端使用jsonp

  2. 服务端使用("Access-Control-Allow-Origin: http://www.requesting-page.com")请求头。

  但是以上两种都不完美,我们最好使用服务端代理

  原理

  jsonp:本质是利用了script标签的src属性具有跨域的特性,通过src请求服务器,服务器返回一个函数的调用,来执行本地的JS代码。相当于本地定义好了一个JS脚本,服务器返回一个脚本,只不过这个脚本是个调用脚本

  本地JS

[AppleScript] 纯文本查看 复制代码
1
2
3
4
function a(){
    console.log(123);
}

服务器返回的js
[AppleScript] 纯文本查看 复制代码
1
a();

AJAX跨域实例

客户端代码
[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="跨域请求"/>
    <script src="jquery.min.js">
    </script>
    <script>
        function method(data){//12
            console.log(data);
        }
    </script>
    <script>
        $('input').on('click',function () {
            $.ajax({
                url:"server.php",
                success:function(data){
                    console.log("方法的实际参数是"+data);
                    method(data);//调用12行方法
                },
                dataType:"jsonp"
            });
        });
    </script>
</body>
</html>

服务端代码
[AppleScript] 纯文本查看 复制代码
1
2
3
$obj = "{'name':'张三'}";
$cb =  $_GET['callback'];
echo $cb."(".$obj.")";



作者:传智播客JavaEE培训学院

首发:http://java.itcast.cn