什么是同源政策?使用JSONP解决同源限制问题

2022-07-29,,,

什么是同源

如果两个页面拥有相同的协议、域名和端口,那么这两个页面就属于同一个源,其中只要有一个不相同,就是不同源。

例如:对于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 请求,如果请求,浏览器就会报错。

Ajax请求限制

Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站,A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求,B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求,但是 A 网站是不能向 B 网站发送 Ajax请求的,同理,B 网站也不能向 A 网站发送 Ajax请求。

使用JSONP解决同源限制问题

jsonp 是 json with padding 的缩写,它不属于 Ajax 请求,但它可以模拟 Ajax 请求。
解决方法:

  1. 将非同源服务器端的请求地址写在script标签的src属性中
<script src="http://localhost:3001/test"></script>
  1. . 服务器端响应数据必须是一个函数的调用,真正要发送给客户端的数据需要作为函数调用的参数。
const result = 'fn({name: "张三"})';
res.send(result);
  1. 在客户端全局作用域下定义函数 fn
function fn (data) {}
  1. 在 fn 函数内部对服务器端返回的数据进行处理
function fn (data) {
   console.log('客户端的fn函数被调用了')
   console.log(data);
}

本文地址:https://blog.csdn.net/cake_eat/article/details/109239049

《什么是同源政策?使用JSONP解决同源限制问题.doc》

下载本文的Word格式文档,以方便收藏与打印。