说清楚JSONP原理

最新推荐文章于 2024-10-16 18:09:44 发布

执迷原理

最新推荐文章于 2024-10-16 18:09:44 发布

阅读量143

点赞数

文章标签：服务器前端 javascript

本文链接：https://blog.csdn.net/ddd2501/article/details/128502219

版权

1.背景

在CORS技术没有出来之前，利用XHR对象发送跨源请求是比较麻烦的，所以当时就有一些另辟蹊径的方式出现，这些方法是可以替代XHR对象的跨源技术，放到现在依旧不过时。

2.主要属性src

属性src是个别html标签的一个属性，该属性支持跨域请求，但是标签不一样，就导致跨源请求方式不一样，不过根本上就是因为src属性，才能避开浏览器的同源策略，从而完成跨域请求

2.1图片探测技术

该技术是利用<img>标签实现跨域请求，当然实现跨域的核心还是src属性，该技术常常被用在网页跨源请求加载图片、线上广告跟踪等业务中。要清楚的是，浏览器通过该技术是获取不到服务器响应的任何数据的(使用img标签不能访问服务器返回的响应内容，也就是说只能单向的发送get请求)，但可以通过监听onload、onerror事件知道什么时候能接收到响应

<img src="http://127.0.0.1:8080/userimage" alt="这是一只猫"> // 会成功跨域访问服务器

优点：

能够完成跨域请求

缺点：

只能单向发送GET请求
不能获取服务器返回的任何响应

2.2JSONP原理

JSONP是“JSON with padding”的简写，是在Web服务商流行的一种JSON变体。JSONP实质是是通过创建<script>标签并为该标签添加src属性来完成跨源请求的。JSONP看起来个JSON一样，只是会被放在一个函数调用里充当参数，例如：

callback({"name" : "hzh"})

JSONP格式包含两个部分：回调和数据。回调是在页面接收到响应之后应该调用的函数，通常回调函数的名称是通过请求来动态指定的。而数据就是作为参数传给回调函数的JSON数据。JSONP原理简单理解就是我们在HTML文件给上一个回调函数，之后通过<script>标签的src属性发起跨源请求，这个请求返回回来的必须是有关调用这个回调函数的方法，例如：

服务器端代码(NodeJS)

import express from 'express';
const app = express();
let port = 8080;
let ip = '127.0.0.1';
let obj = {
	name :'hzh',
	ip : '127.0.0.1'
}
app.get('/user',(req,res) => {
	let myJSONP = req.query.callback; // 获取回调函数名称 
	res.send(`${myJSONP}(${JSON.stringify(obj)})`); // 响应返回有关调用客户端代码的回调函数的方法
});
app.listen(port,() => {
	console.log(`your sever is running at http://${ip}:${port}`);
})

客户端代码

function myJSONP(response){ // 响应之后我们需要处理的回调函数
	console.log(`You are at IP address ${response.ip}`)
}
let script = document.createElement('script');
script.src = 'http://127.0.0.1:8080/user?callback=myJSONP'; 
document.body.insertBefore(script,document.body.firstChild);