关于前端:跨域问题

30次阅读

共计 1060 个字符，预计需要花费 3 分钟才能阅读完成。

同源策略阐明
阐明: 浏览器 出于安全性的思考要求发动 Ajax 时, 必须满足同源策略的规定.
要求:
1. 协定名称雷同 http/https
2. 域名雷同
3. 端口号雷同
如果上述的 3 条违反任意的一条即违反了同源策略. 称之为 跨域拜访 . 反之为 同域拜访 。

解决方案一、JSONP 跨域原理阐明

JSONP(JSON with Padding)是 JSON 的一种“应用模式”，可用于解决支流浏览器的跨域数据拜访的问题。因为同源策略，一般来说 A 服务器的网页无奈与不是 A 的服务器沟通，而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个凋谢策略，网页能够失去从其余起源动静产生的 JSON 材料，而这种应用模式就是所谓的 JSONP。用 JSONP 抓到的材料并不是 JSON，而是任意的 JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

1). 利用 javaScript 中的 src 属性实现跨域.
2). 自定义回调函数
<script type=”text/javascript”> /JS 是解释执行的语言 / / 定义回调函数 / function hello(data){alert(data.name); } </script>

3). 将返回值后果进行非凡的格局封装: callback(json)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 测试 JSON 跨域问题 </title>    
    <script type="text/javascript">
        /*JS 是解释执行的语言  */
        /* 定义回调函数  */
        function hello(data){alert(data.name);
        }
    </script>
    <!-- 该 json 始终保留到浏览器中期待调用, 然而没有函数名称无奈调用  -->
    <script type="text/javascript" src="http://manage.jt.com/test.json"></script>
    <script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
</head>
<body>
    <h1>JS 跨域问题 </h1>
    
</script>
</body>
</html>

JSONP API 学习
1). 编辑页面, 发动跨域申请
jsonp 只能反对 get 申请的起因是：src 属性只能反对 get 申请