jsonp原理并用promise实现JSONP

最新推荐文章于 2022-04-11 09:52:33 发布

Bearbearssss

最新推荐文章于 2022-04-11 09:52:33 发布

阅读量290

点赞数

分类专栏：原生方法封装安全文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41711709/article/details/116505970

版权

本文探讨了由于浏览器安全策略导致的跨域问题，以及如何利用JSONP（JSON with Padding）来规避这一限制。JSONP利用script标签的src属性实现不同源的数据请求。通过返回一个预先定义好的函数名，当该函数存在于当前页面的JavaScript中时，服务器返回的数据就能被调用，从而实现跨域数据交互。此外，文章还提出使用Promise来封装JSONP，提供更优雅的异步处理方式。

摘要由CSDN通过智能技术生成

jsonp由来：

浏览器为了保证安全，在访问不同源（协议，域名，端口号有一个不一样都叫不同源）的资源时，浏览器会拦截。

为了绕开浏览器的跨域拦截，就有了jsonp跨域方案

jsonp原理：

js中利用标签（例如 script、img等）的src能加载不同源的资源，从而实现跨域。

eg：利用script加载一个不同源的文件，该文件返回一个函数名，如果返回的函数名在js文件中正好有这个函数，那返回的函数名就调用js文件中的方法，从而达到交流的目的。

利用这个原理我们用promise来实现一个jsonp公共方法

function jsonP(url, data) {
    return new Promise((reslove, reject) => {
       // 判断url中是否有带参数，有的话拼接&符，没有的话拼接？号；方便下次拼接参数
      const dataString = url.indexOf('?') === -1 ? '?' : '&';
       // 利用时间戳声明一个唯一的变量
      const callBack = `CB${new Date().getTime()}`;
        // 将变量名拼接在链接上
      url += `${dataString}callBack=${callBack}`;
      if (data) {
        // 如果有参数将参数拼接到URL上
        Object.keys(data).forEach((item) => {