js处理跨域的方案之jsonp用法详解

更新时间：2024年11月26日 10:46:56 作者：嘤嘤怪呆呆狗

这篇文章主要介绍了js处理跨域的方案之jsonp用法的相关资料,文中分享了前端调用后端接口的三种方式：Ajax、fetch、axios,并详细解释了同源策略和跨域的概念,需要的朋友可以参考下

1. 引言

在实际开发中，数据都是后端返回的，那就需要前端调用后端的接口，来拿到数据

前端中调接口的方式一般有如下三种

Ajax
fecth
axios 这个是最常用的

涉及到调后端接口的话，后端的接口和前端肯定不在一个端口，甚至不在一个域名下，这样就会导致跨域

fetch('https://editor.csdn.net/md?not_checkout=1&spm=1011.2415.3001.6217&articleId=141032145')

因为请求的主机地址和请求的地址，协议端口域名都不一样，所以导致了跨域

2. 同源策略和跨域

同源策略
同源：协议、域名、端口，三者全部相同，才是同源。

同源策略是浏览器最核心也最基本的安全机制，它限制了来自不同源（即域、协议或端口）的文档或脚本之间的交互操作。
具体来说，同源策略要求如果两个页面的协议、域名和端口均相同，则它们被视为同源，否则即为非同源。

根据同源策略，浏览器只允许当前网页与同一源下的其他资源进行交互，包括读取和修改。
换句话说，JavaScript脚本在一个源中加载的页面只能与同一源中的页面进行通信，而无法直接对不同源的页面进行读写操作。

同源策略的主要目的是防止恶意网站窃取或篡改其他网站的敏感信息，从而保护用户的隐私和安全。

跨域

协议、域名、端口，只要有一个的不同，就是跨域。

URL	是否跨域	备注
http://www.baidu.com/1.html 和 http://www.baidu.com/2.html	否	协议端口域名一样，即为同源
http://www.baidu.com/1.html 和 http://www.csdn.com/2.html	是	域名不同
http://www.baidu.com:7000/1.html 和 http://www.baidu.com:8000/2.html	是	端口不同
https://www.baidu.com/1.html 和 http://www.baidu.com/2.html	是	协议不同

注意： localhost 和 127.0.0.1 也是构成了跨域

3. html 存在的特殊情况

html 中有以下几个标签，是可以引入与当前页面不同(跨域) 的地址的

script标签
img 标签
link 标签
video 标签
audio 标签
iframe 标签

4. JSONP

JSONP 其实是跨域的一种解决方案 JSONP 全称“JSON with Padding”，译为“带回调的 JSON”，它是 JSON 的一种使用模式。通过 JSONP 可以绕过浏览器的同源策略，进行跨域请求。

jsonp 的本质是：利用 script 标签的src 属性 不受跨域的影响。

前端具体操作

在JS脚本中，先定义一个函数 用来处于后端返回的数据
通过js 脚本，创建 script 标签，src 设置为后端接口地址，并且请求地址中加上第一步定义的函数名称
把这个 script 插入到DOM中，调用接口

后端具体操作

开启一个接口服务
解析出来请求地址查询参数中的callback 的值
返回文本类型，格式是 callback的值(后端数据) 比如：abc([{name:”1"},{ name:“2” }]) 服务器返回的内容，必须是一段可执行的 JavaScript 代码，不能是其它内容

前端代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>点击调用接口</button>
  <script>
    function getUser(list) {
      console.log('user', list);
      // 创建一个新的空白的文档片段
      let fragment = document.createDocumentFragment();
      list.forEach(item => {
        let div = document.createElement('div');
        div.innerHTML = item.name;
        fragment.appendChild(div);
      });
      document.body.appendChild(fragment);
    }

    document.querySelector('button').onclick = function () {
      // 1、创建script 标签
      let scriptEl = document.createElement('script');
      // 2、设置 src 地址，并且传递过去 处理返回数据的函数名称
      scriptEl.src = 'http://127.0.0.1:8080/api/getUserList?callback=getUser';
      // 3、插入到DOM
      document.body.appendChild(scriptEl);
    }
  </script>
</body>

</html>

后端代码如下

const htpp = require("http");
const url = require("url");
const querystring = require("querystring");

const userList = [
  { id: 1, name: "张三" },
  { id: 2, name: "李四" },
  { id: 3, name: "王五" },
];
const server = htpp
  .createServer((req, res) => {
    const parsedUrl = url.parse(req.url);
    const queryParams = querystring.parse(parsedUrl.query);
    console.log(req.url, queryParams);

    if (req.url.split("?")[0] === "/api/getUserList") {
      res.end(`${queryParams.callback}(${JSON.stringify(userList)})`);
    } else {
      res.end("404 Not Found");
    }
  })
  .listen(8080);

5. JSONP优缺点

优点

相对简单：容易实现
兼容性好：由于JSONP依赖于script标签，它可以在老旧的浏览器中工作，不需要现代浏览器支持的高级功能或API。

缺点

只支持get 请求
安全性不好

可以使用其他的跨域方案，并不一定非得使用JSONP

参考链接

createDocumentFragment MDN

到此这篇关于js处理跨域的方案之jsonp用法详解的文章就介绍到这了,更多相关js处理跨域jsonp内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript+css+HTML实现移动端轮播图（含源码）
这篇文章主要介绍了JavaScript+css+HTML实现移动端轮播图并含源码的分享，需要的小伙伴可以参考一下，希望对你有所帮助
2022-01-01
JavaScript中字符串相关的方法使用总结
这篇文章主要为大家详细介绍了JavaScript中字符串相关的方法使用，文中的示例代码讲解详细，具有一定的参考价值，需要的小伙伴可以学习一下
2023-08-08
javascript制作sql转换为stringBuffer的小工具
这篇文章主要介绍了javascript制作sql转换为stringBuffer的小工具，使用方法很简单，吧写好的sql语句只要格式化好之后放进去就可以了，推荐给大家，有需要的小伙伴可以参考下。
2015-04-04
如何将一维度数组转换成三维数组结构
在开发过程中,可能会遇到需要将一维数组转换为多维数组的情况,以满足特定数据结构的需求,文章介绍了如何将后端返回的一维列表数据通过编程方法转换成三维数组结构,以适应特定的UI展示需求,通过循环遍历和数据重组的方式,可以有效地实现数组结构的转换
2024-09-09
微信小程序里引入SVG矢量图标的方法
这篇文章主要介绍了微信小程序里引入SVG矢量图标的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
Radio 单选JS动态添加的选项onchange事件无效的解决方法
radio 单选JS动态添加的选项,onchange事件无效。使用delegate（）函数可以解决该问题，具体解决方案大家通过本文详细了解下
2016-12-12
JavaScript canvas基于数组生成柱状图代码实例
这篇文章主要介绍了JavaScript canvas基于数组生成柱状图代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-03-03
JavaScript中操作字符串小结
字符串在javascript中几乎无处不在，在你处理用户的输入数据的时候，在读取或设置DOM对象的属性时，在操作cookie时，当然还有更多...。JavaScript的核心部分提供了一组属性和方法用于通用的字符串操作，如分割字符串，改变字符串的大小写，操作子字符串等。
2015-05-05
JS+H5 Canvas实现时钟效果
这篇文章主要为大家详细介绍了JS+H5 Canvas实现时钟效果，利用JavaScript和Canvas实现简单时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
JS检测页面中哪个HTML标签触发点击事件的方法
这篇文章主要介绍了JS检测页面中哪个HTML标签触发点击事件的方法,涉及javascript页面元素事件响应机制,需要的朋友可以参考下
2016-06-06