一.ajax的同源策略
Ajax请求限制:
Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站,A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求,B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求,但是 A 网站是不能向 B 网站发送 Ajax请求的,同理,B 网站也不能向 A 网站发送 Ajax请求。
XMLHttpRequest
fetch() 封装了ajax
同源策略:
什么叫做同源
如果两个页面拥有相同的协议、域名和端口,那么这两个页面就属于同一个源,其中只要有一个不相同,就是不同源。
http://www.example.com/dir/page.html
http://www.example.com/dir2/other.html:同源
http://example.com/dir/other.html:不同源(域名不同)
http://v2.www.example.com/dir/other.html:不同源(域名不同)
http://www.example.com:81/dir/other.html:不同源(端口不同)
https://www.example.com/dir/page.html:不同源(协议不同)
什么叫同源策略
同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源
同源策略的目的
同源策略是为了保证用户信息的安全,防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie,B网站是不能访问的。
随着互联网的发展,同源政策也越来越严格,在不同源的情况下,其中有一项规定就是无法向非同源地址发送Ajax 请求,如果请求,浏览器就会报错。
二.jsonp跨域
使用JSONP解决同源限制问题
jsonp的原理:页面上的很多标签比如src,href,都不会受到同源策略的影响
有一些标签天生就有跨域能力,比如:img,link,iframe,script
jsonp就是利用<script>
的src来实现跨域获取数据的,只支持get请求
jsonp 由两部分组成:回调函数和数据,回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据
jsonp 是 json with padding 的缩写,它不属于 Ajax 请求,但它可以模拟 Ajax 请求。
-
将不同源的服务器端请求地址写在 script 标签的 src 属性中
<script src="www.example.com"></script>
-
服务器端响应数据必须是一个函数的调用,真正要发送给客户端的数据需要作为函数调用的参数。
const data = 'fn({name: "张三", age: "20"})'; echo data;
-
在客户端全局作用域
function fn(data){ }
-
在fn函数内部对服务器端返回的数据进行处理
function fn(data){ console.log(data); }
整体实现思路:
- 客户端需要将函数名称传递到服务器端
- 将script请求的发送变成动态的请求。
<script>
function fn(data){
console.log(data);
}
// 接收后端响应的数据
</script