1. 跨域的原因
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
“同源"指的是"三个相同”:
协议相同
域名相同
端口相同
URL | 结果 | 原因 |
---|---|---|
http://store.company.com/dir2/other.html | 同源 | 只有路径不同 |
http://store.company.com/dir/inner/another.html | 同源 | 只有路径不同 |
https://store.company.com/secure.html | 失败 | 协议不同 |
http://store.company.com:81/dir/etc.html | 失败 | 端口不同 ( http:// 默认端口是80) |
http://news.company.com/dir/other.html | 失败 | 主机不同 |
目的:
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
限制:
随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制:
(1)Cookie、LocalStorage 和 IndexDB 无法读取。
(2)DOM 无法获得。
(3)AJAX 请求不能发送。
Ajax跨域
Ajax跨域指的是将Ajax请求进行跨域处理,而不是说在Ajax中提供了跨域的方法。同源政策中明确规定Ajax请求只能发给同源的网址,否则就会发生跨域报错。除了设置代理之外页面中有三种常见的解决跨域的手段,
1. 设置服务端响应头
2. 代理
3. JSONP
jaonp跨域
Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
作为前端开发人员,我们应该掌握的跨域方法是jsonp
JSONP特点就是简单适用,浏览器全部支持,服务器改造非常小。
原理
它的基本思想是,网页通过添加一个script元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
使用方法:
①、在html中插入script标签,并利用script标签发起跨源请求
②、在服务器对应php文件中通过拼接字符串,模拟函数调用。并将要返回数据通过回调函数参数返回。
③、在html页面中,显式写出回调函数。这样当跨源请求完成后对应回调函数会自动执行。
优点:
(1)由于使用script脚本作为请求,因此实际上请求和传统的引入js脚本没有任何区别。
(2)而在返回的数据中我们也尽量模拟出了js调用函数的语法,因此只要在页面中声明了回调函数就会自动被调用。
(3)再者作为参数的【服务器端】的JSON数据,在js中是被直接识别为对象,因此在回调函数中也避免了使用JSON.parse的步骤。
代码:
function aaa(a){
console.log(a)
}
test(123)
// 封装jsonp
function addScript(src){
// 创建<script>
var script = document.createElement("script")
// 修改src属性
script.src = src;
// 添加到body
document.body.appendChild(script)
}
// 加载完成后执行函数
window.onload = function(){
addScript("http://127.0.0.1:8888/jsonp.php?callback=aaa")
}
<?php
$a = $_GET["qqq"];
$b = '123';
// echo "123";
echo $a.'('.$b.')';
?>