JSONP解决JS跨域问题的实现

<script src="/UploadFiles/2021-04-02/api">


我们可以看到这本质上就是一个GET请求，同理，link和script里的href和src同样可以通过GET请求去请求资源。它们并没有受到同源策略的影响，jsonp的实现原理其实就是利用了这个策略的小“bug”，从而实现跨越请求的。既然是一个GET请求，服务器一定可以收到这个请求并作出响应。下面就让我们来具体实现一下吧！
四：原理及跨域实现
具体流程( 原理 )
jsonp的执行流程其实就是简单的两步。第一，在前端预先定义好一个带参数的回调函数用来接受后端传来的数据。第二，在后端启动一个server服务，将要传的数据以定义好了的回调函数名加上返回结果的方式传给前端。



// 前端部分
<script>
  // 1 callback
  // 2 后端 callbackName(数据)
  function onResponse(posts) {
    console.log(posts);
  }
  // 前端没有调用
</script>
<!-- 后端返回结果 -->
<!-- 调用 -->
<script src="/UploadFiles/2021-04-02/api">



//后端部分
const http = require('http');
http.createServer((req, res) => {
  if (req.url === '/api') {
    let posts = ['js', 'php'];
    res.end(`onResponse(${JSON.stringify(posts)})`);
  }
})
.listen(9090, () => {
  console.log(9090)
})


 
前端script中的src请求完毕以后，后端会给前端返回一个字符串onResponse(["js","php"])，因为script标签的原因，浏览器会把这一段字符串当做js来执行。这样我们一开始在前端定义好了的回调就会执行，我们就拿到数据了。
封装
以上只是有一个简单的请求，实际项目中肯定会有很多个请求，我们肯定不可以定义一排的script标签和回调函数。这样写出来的代码就太不灵活了。封装的目的之一也就是为了前端可以灵活地修改预定义回调函数的名字，而不是在前后端把回调函数定死。同时，把代码封装以后，我们就不用手动地创建回调函数了，封装后的函数会帮我们自动放src的地址，自动创建回调函数名。



// 后端
const http = require('http');
const url = require('url');
http.createServer((req, res) => {
 // /api"htmlcode">

// 前端（代码放在body中执行）
<script>
 function jsonp(url, options) {
  // 超时处理
  const { timeout } = options;
  return new Promise((resolve, reject) => {
   // 防止函数名冲突
   let funcName = `jsonp${Date.now()}`;
   let time = null, scriptNode;
   // 定义callback
   window[funcName] = function(data) {
    if (timeout) clearTimeout(time);
    resolve(data);
    // 很重要的性能优化点
    // 清除本次请求产生的回调函数和script标签
    delete window[funcName];
    document.body.removeChild(scriptNode);
   }
   // 创建script标签
   scriptNode = document.createElement('script');
   // 给script标签添加src属性
   scriptNode.src = `${url}"network err!")
 })
</script>


 
五：总结
1: 优点

  
它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制
  
它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持
  
并且在请求完毕后可以通过调用callback的方式回传结果

2: 缺点
它 只支持GET请求 而不支持POST等其它类型的HTTP请求
它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题

            
           
            上一篇：基于redis的小程序登录实现方法流程分析

            下一篇：JS实现时间校验的代码