黑马程序员技术交流社区

标题: 【太原校区】同源跨域 [打印本页]
作者: 郝永亮    时间: 2019-1-2 23:00
标题: 【太原校区】同源跨域
同源：同一个域名下不同文件或文件夹之间的访问
跨域：不同域名下之间文件或文件夹之间的访问
通用的一个跨域策略叫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] 纯文本查看 复制代码
function a(){

        console.log(123);



}

服务器返回的js
[AppleScript] 纯文本查看 复制代码
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] 纯文本查看 复制代码
$obj = "{'name':'张三'}";

$cb =  $_GET['callback'];

echo $cb."(".$obj.")";



作者: 郝永亮    时间: 2019-1-2 23:01
作者: Vicky韦    时间: 2019-1-3 09:45
棒
作者: 王高飞    时间: 2019-1-3 10:44
跨域 学到了
作者: Julien27    时间: 2019-1-3 12:02
5分面试题到手
作者: 张志辉    时间: 2019-1-3 12:16
很详细   
作者: liudongjie    时间: 2019-1-3 12:35
作者: liuchengwei1    时间: 2019-1-3 12:53
作者: cuichang1    时间: 2019-1-3 14:24
作者: 张兆秋    时间: 2019-1-6 15:39




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2