JSONP解决同源策略限制引起跨域问题原理
更新时间：2023年08月04日 10:31:14 作者：Qing
这篇文章主要为大家介绍了JSONP解决同源策略限制引起跨域问题原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
同源策略的限制引起跨域问题
为了解决跨域问题，大家利用script标签请求src指向的资源不受同源策略限制的特性来进行资源的请求，这种方式就是JSONP。
接口实现
我们可以利用script标签请求资源不受同源策略限制的特性，可以自己简单的封装一个jsonp请求函数。
首先在js代码中手动创建script标签，把需要请求的资源放到src属性上，然后把script标签加入到body标签里面，在解析html的过程中就会执行，当执行完script并且请求到资源后，后端结果会以函数调用的的形式返回字符串类型的响应结果，这个形式的具体结构为函数名称(函数实参)，和平时我们在调用函数时没有区别，然后页面就会执行后端返回的函数。
这里有个问题，页面会调用后端返回的函数，那么这个函数在哪里定义？
当然是要在本地的js代码里面定义这个函数，然后等待后端传递的参数，这个参数其实就是我们想要的返回结果。
// 简单写个序列化函数，不要就结是否考虑全面
function stringify(params) {
let res = "";
if (!params || typeof params !== "object") {
throw new Error("请传递参数对象");
}
Object.keys(params).forEach((key) => {
res += `&${key}=${params[key]}`;
});
return res.slice(1);
}
function jsonp({ url, params }) {
return new Promise((resolve) => {
const callback = `jsonp_${Math.ceil(Math.random() * 10000)}`;
const script = document.createElement("script");
script.src = `${url}?${stringify({ callback, ...params })}`;
document.body.appendChild(script);
// 一般情况下，函数的定义放置在window对象上，否则在调用函数的时候会找不到定义的实现
window[callback] = function (data) {
if (window[callback]) {
delete window[callback];
}
document.body.removeChild(script);
resolve(data);
};
});
}发送JSONP请求
利用封装的jsonp发起请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>jsonp请求</title>
</head>
<body>
<button>点我就会biubiubiu地发送请求</button>
</body>
<script>
const button = document.querySelector("button");
button.onclick = function () {
jsonp({ url: "http://localhost:8888" }).then(console.log);
};
</script>
</html>服务端处理JSONP请求
jsonp请求需要服务端配合，约定查询参数callback是在本地定义好的函数，根据传递过来的callback返回其函数调用，并把数据通过实参的方式返回给客户端。
const http = require("http");
const url = require("url");
const qs = require("querystring");
const server = http.createServer((req, res) => {
const { query } = url.parse(req.url);
const params = qs.parse(query);
if (params.callback) {
const data = `${params.callback}(${JSON.stringify({ a: 1, b: 2 })})`;
res.end(data);
}
});
server.listen(8888, () => {
console.log("server is listen 8888");
});以上就是JSONP解决同源策略限制引起跨域问题原理的详细内容，更多关于JSONP同源策略跨域限制的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了Javascript实现简易导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了JavaScript阻止表单提交方法,通过代码示例讲解了阻止表单提交需要注意的事项，以及onSubmit和check（）的区别写法,需要的朋友可以参考下2017-08-08
chrome的drag and drop API，它能将本地的图片放到浏览器中进行预览，猜想一下当我们把图片拖拽到浏览器里会发生什么事情，你的浏览器试图打开一个新的页面并加载这个图片。这篇文章给我们介绍drag-and-drop实现图片浏览器预览，需要的朋友可以参考下2015-08-08
分割字符串成数组的方法有很多，不过使用最多的还是split函数，接下来为大家介绍下它的具体使用方法，感兴趣的朋友可以参考下2013-09-09
在开发过程中,我们常常需要得到js数组的最后一个数组元素,下面这篇文章主要给大家介绍了关于JavaScript获取数组最后一个元素的3种方法以及性能,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了小程序跳转到的H5页面再跳转回跳小程序的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了javascript模板方法模式和职责链模式,结合实例形式较为详细的分析了模板方法模式和职责链模式基本原理、实现方法与相关注意事项,需要的朋友可以参考下2023-07-07
省市区三级联动在填写表单时有关地址这一块显得尤为重要,直接提高了用户的填写速度与准确度，接下来本文使用js代码实现一个，感兴趣的你可以参考下希望可以帮助到你2013-03-03
这篇文章主要介绍了javascript框架设计之浏览器的嗅探和特征侦测的相关资料,需要的朋友可以参考下2015-06-06
让JavaScript拥有类似Lambda表达式编程能力的方法
在前几天的博文中我发布了一个可以自定义页码呈现方式的组件，有C#和JavaScript两个版本。2010-09-09
最新评论