首页技术文章正文

同源跨域

更新时间: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] 纯文本查看复制代码

<!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

上一篇：Extensible Markup Language 可扩展标记语言 下一篇：单点登录的实现

上海中心

热门课程

同源跨域

最新资讯

相关阅读

热门课程推荐