解决同源限制的方法之一 jsonp

最新推荐文章于 2024-06-05 09:02:44 发布

陪我去看海吧！

最新推荐文章于 2024-06-05 09:02:44 发布

阅读量225

点赞数

文章标签：前端 ajax javascript node.js

本文链接：https://blog.csdn.net/hahaha918/article/details/106057735

版权

Ajax请求限制

Ajax只能向自己的服务器发送请求

什么是同源

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

为什么有同源政策

同源政策时为了保证用户信息的安全,防止恶意的网站窃取数据.最初的同源政策是指 a 网站在客户端设置的 Cookie ,b 网站是不能访问的,
在不同源的情况下,其中有一项规定就是无法向非同源地址发送Ajax请求,如果请求,浏览器就会报错

解决同源方法之一 jsonp

使用jsonp解决同源限制问题：
jsonp 是 json with padding 的缩写，它不属于Ajax请求，但他可以模拟Ajax请求

  1.将不同源的服务器端请求地址写在script标签的src属性中
  <script src='www.example.com'></script>

  2.f服务器响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数
  const data = 'fn({name:'zhangsan',age:20})';
  res.send(data)

  3.在客户端全局作用域下定义函数fn
  function fn (data) {}

  4.在fn函数内部对服务器端返回的数据进行处理
  function fn (data) {log(data)}

这里是封装的一个jsonp的方法

// jsonp 函数封装
function jsonp (options) {
  // 动态生成script标签
  var script = document.createElement('script')
  // 要传递的数据
  // 字符串拼接
  var params = '';
  // get请求，将数据拼接在请求地址后
  for(var attr in options.data){
    params += '&'+ attr + '=' + options.data[attr];
  }
  // 设置一个变量当函数名，防止 window.fn 请求时被层叠
  // myJsonp01542     强制转换为string类型后，把 . 变为 空
  var fnName = 'myJsonp' + Math.random().toString().replace('.','');
  // 在全局中添加一个属性存放函数  全局函数处理
  window[fnName] = options.success
  // scr属性设置
  script.src = options.url + '?callback=' + fnName + params;
  // 将生成的script标签添加在页面中
  document.body.appendChild(script)
  // 当 script 请求完成后，删除
  script.onload = function () {
    document.body.removeChild(script)
  }
}