Ajax资料之同源政策

◆ Ajax请求限制:

Ajax只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站,A网站中的 HTML文件只能向A网站服务器中发送Ajax请求,B网站中的HTML文件只能向B网站中发送Ajax请求,但是A网站是不能向 B 网站发送 Ajax请求的,同理,B网站也不能向A网站发送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 是 json with padding 的缩写,它不属于 Ajax 请求,但它可以模拟 Ajax 请求。

1、将不同源的服务器端请求地址写在 script 标签的 src 属性中

 <script src="www.example.com"></script>

2、服务器端响应数据必须是一个函数的调用,真正要发送给客户端的数据需要作为函数调用的参数。

const data = 'fn({name: "张三", age: "20"})';
res.send(data);

3、在客户端全局作用域下定义函数 fn

function fn (data) { }

4、在 fn 函数内部对服务器端返回的数据进行处理

function fn (data) { console.log(data); }
发布了292 篇原创文章 · 获赞 6 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/sky6even/article/details/103878612
今日推荐