JSONP原理揭秘-CSDN博客

跨域

为什么会出现跨域？

因为浏览器有同源策略的限制，同源策略是浏览器最核心最基础的安全策略。
端口，协议，域名，有一者不同就会出现跨域的问题。

解决跨域的方式

JSONP
CORS

JSONP怎样解决跨域？

所谓的JSONP解决跨域问题就是前端在合适的时期动态添加一个script标签，请求后端给的接口带上一个回调函数。

因为script标签不受浏览器同源策略的限制。

手摸手带你解开JSONP的原理

实现JSONP跨域和JSONP原理的几步

**前端**
复制代码

前端先定义一个回调函数

<script type="text/javascript" charset="utf-8">
	function callback(data){
		console.log(data)
	}
</script>
复制代码

2.在合适的阶段通<script标签请求后端给出的地址带上callback回调参数

<script src="http://192.168.1.107:3000?callback=callback" type="text/javascript" charset="utf-8"></script>
复制代码

后端

开启一个接口服务

var express = require('express');

var app = express();

app.get('/',function(req,res,next){
	res.end("ok")
})

app.listen(3000,function(){
	
	console.log('JSONP')
	
})
复制代码

2.等前端请求接口的时候，获取请求的参数的回调

app.get('/',function(req,res,next){
	
	var callback = req.query.callback;
	
})
复制代码

3.最后后端把所需的数据放到获取到的回调函数参数内，返回给前端（返回的是字符串），浏览器会把它解析为js执行

app.get('/',function(req,res,next){
	
	var callback = req.query.callback;
	//模拟所需的数据
	var data = {
				err_ok:0,
				message:"请求成功",
				data:{
					name:"july",
					age:21
				}
			}
				
	res.end(`${callback}(${JSON.stringify(data)})`)
	
})
复制代码

最终后端代码

var express = require('express');

var app = express();

app.get('/',function(req,res,next){
	
	var callback = req.query.callback;
	//模拟所需的数据
	var data = {
				err_ok:0,
				message:"请求成功",
				data:{
					name:"july",
					age:21
				}
			}
				
	res.end(`${callback}(${JSON.stringify(data)})`)
	
})

app.listen(3000,function(){
	
	console.log('JSONP')
	
})
复制代码

最终前端的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript" charset="utf-8">
			function callback(data){
				console.log(data)
			}
		</script>
		<script src="http://192.168.1.107:3000?callback=callback" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
复制代码

前端接收到的结果

JSONP原理就是这里简单

--end--

。