JSONP原理

最新推荐文章于 2024-05-20 22:41:35 发布

广东话的蛇皇

最新推荐文章于 2024-05-20 22:41:35 发布

阅读量132

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104809491

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

JSONP原理

由于浏览器的安全性限制，不允许Ajax访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这样的访问是不安全的，为了解决这个问题，可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称为JSONP（根据原理，可得JSONP只支持Get请求）

客户端

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
		<script>
			function showInfo(data){
				console.log(data)

			}
		</script>
		<script src="http://127.0.0.1:3000/getdata?callback=showInfo"></script>
</body>
</html>

服务端

const http = require('http')
const urlModule = require('url')
const server = http.createServer()
server.on('request', function (req,res) {
	const { pathname : url, query } = urlModule.parse(req,url,true)
	if (url === '/getdata') {
		var data = {
			name : jack,
			age : 18,
		}
		var scriptStr = `${query.callback}(${JSON.stringify(data)})`
		res.end(scriptStr)
	} else {
		res.end('404')
	} 
})
server.listen(3000, function(){
	console.log('server listen at http://127.0.0.1:3000')
})