-
前言
- 在进行数据请求的时候,可能会因为同源策略的影响,访问数据的时候会出现跨域的情况,此时,我们可以使用JSONP技术,忽略同源策略去访问数据。
-
JSONP的优点
- JSONP不像使用 XMLHttpRequest 对象实现的 【AJAX】 发送请求那样受到同源策略的限制,JSONP可以忽略同源策略的影响。
- JSONP对浏览器的兼容性处理的更好。
-
JSONP的缺点
- JSONP是使用script标签去发送的请求,因此只能处理get请求,不能处理post以及其他的http请求。
- JSONP是在发送请求的时候传递了一个接受数据的函数,因此要后端配合去使用。
- JSONP在发送请求失败的时候,不会返回状态码。
- JSONP在发送请求的时候安全性能较低,在使用JSONP的时候必须要保证使用的JSONP服务必须是安全可信的。
-
JSONP的简单封装
// 接收数据的函数 function getData(data) { console.log(data, '获取到的数据'); // {username: 'admin', password: 'a123'} '获取到的数据' } // 封装JSONP函数 function JSONP(obj) { // 创建一个 script 标签 let script = document.createElement('script'); // 判断是否传递回调函数名称 if (!obj.callbackName) throw Error('JSONP必须传递回接受数据回调函数名称'); // 拼接字符串 let str = `${obj.url}?callback=${obj.callbackName}`; // 判断是否传递data 【queryString数据】 if (obj.data) { // 传递了,遍历数据 进行拼接 for (key in obj.data) { str += `&${key}=${obj.data[key]}`; } } // 给script 标签添加src 属性 script.src = str; // 上树标签 document.body.appendChild(script); } JSONP({ url: 'http://localhost:3000/login', data: { color: 'red', num: 10, }, callbackName: 'getData', });
-
简单模拟接口数据
// 引入express const express = require('express'); // 注册程序 const app = express(); // 创建变量 const userinfo = { username: 'admin', password: 'a123', }; // 监听接口 app.get('/login', (req, res) => { // 返回数据 res.end(`${req.query.callback}(${JSON.stringify(userinfo)})`); }); // 监听端口 app.listen(3000, () => { console.log('监听3000'); });
JS - 解决跨域的办法 - JSONP【简单实现JSONP】
于 2022-02-13 23:12:33 首次发布