javascript 同源策略和 JSONP 的工作原理

时间:2021-04-04 14:45:03

同源策略

  同源策略是一个约定,该约定阻止当前脚本获取或操作另一域的内容。同源是指:域名、协议、端口号都相同。

  简单地说,A 服务器下的 a 端口执行 ajax 程序,不能获取 B 服务器或者 A 服务器的其他端口,是一种隔离策略。但是这个策略对标签的 src 属性无效,这个属性就是请求其他服务器的,所以可以用<script>标签的 src 属性请域外服务器。

JSONP

  JSONP 的原理是通过 script 标签的 src 属性可以跨域的特点,发送请求到外域服务器,外域服务器返回 js 代码,客户端接受响应,然后就执行了这段 js 代码。

  具体过程是:

  1. 动态创建 script 标签,并添加到 html 中。
  2. 定义回调函数。
  3. 客户端传递一个 callback 参数(值为回调函数的函数名)给服务器,然后服务器端返回数据时,会将这个 callback 参数作为函数名将 json 数据包裹住,一起发给客户端。
  4. 然后客户端就执行了这段 js 代码。

JSONP 和 AJAX 的区别

  1. ajax 的核心是通过 xmlHttpRequest 对象获取服务器数据
  2. jsonp 是动态创建 script 标签,利用它的 src 属性调用外域服务器的 js 脚本
  3. jsonp 只能用 get 请求,ajax 可以用 get 和 post