JSONP简述
JSONP是“JSON with padding”的简写，是在web服务上流行的一种JSON变体。
JSONP格式包含两个部分：回调和数据。如：callback({"name": "jsonp"})。
JSONP调用是通过动态创建<script>元素并为src属性指定跨域URL实现的。
优点
简单易用。使用JSONP可以直接访问响应，实现浏览器与服务器的双向通信。
缺点
- 不安全，JSONP是从不同的域拉取可执行代码。
- 不好确定JSONP请求是否失败。
JSONP实现
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsonp study</title>
</head>
<body>
<script>
function printName(data) {
document.write('hello ' + data.name);
}
</script>
<!-- 因为JSONP是有效的JavaScript，所以JSONP响应在被加载完成只后会立即执行。 -->
<script src="http://127.0.0.1:8000?callback=printName"></script>
</body>
</html>
动态创建script元素然后指定src属性也行。
node代码
const http = require('http');
const server = http.createServer();
server.listen(8000);
server.on('request', (req, res) => {
try {
// 注意：这里假设url只传递一个参数callback
const callback = req.url.split('=')[1];
res.statusCode = 200;
// 返回JSONP格式数据
res.end(`${callback}({"name": "JSONP"})`);
} catch(ex) {
console.error(ex.message);
res.statusCode = 500;
res.end('throw new Error("server error")');
}
});
通过以上代码就简单实现了通过jsonp跨域请求数据。有兴趣的小伙伴可以自己试试哦~
