【JSONP】通过nodejs做服务器简单模拟实现跨域请求

最新推荐文章于 2023-10-12 01:16:16 发布

逛街的猫啊

最新推荐文章于 2023-10-12 01:16:16 发布

阅读量2.4k

点赞数 1

分类专栏： WEB前端 Node.js 文章标签： jsonp 跨域

本文链接：https://blog.csdn.net/swl979623074/article/details/53397267

版权

WEB前端同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

Node.js

20 篇文章 0 订阅

订阅专栏

第一听说JSONP，看着名字以为使一中数据类型。其实不然，这是跨域请求的方式。

大家可能认为自己没接触过，但是大家一定用过这种方式，只是大家自己没有留意过。
如：<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
这个标签大家很熟悉的吧，直接从网上拉下jquery.js。然后自己的网页就能识别"$"了，这就是JSONP，也是跨域请求（我自己的理解，不对之处，还请指点）

“http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js”,对于这个url地址，如果大家使用AJAX请求进行访问的，就会报同源错误。但是使用<script></script>标签就不会了，通过动态添加<script></script>标签的过程就是JSONP了。

简单的理解JSONP流程
1.前端创建脚本
2.告诉后台脚本内的方法名
3.后台拼接字符串返回方法调用的javascript代码

4.动态添加<script>，执行后台返回的javascript代码，调用前端已创建的脚本

For instance:
server.js

var http = require("http")
var Url = require("url")

http.createServer(function(req,res){
	var path = req.url;
	var params = parseUrl(Url.parse(path).query);
	var data = {name:"swl",age:20};
	var script = params.func+"("+JSON.stringify(data)+")";
	res.write(script);
	res.end();
}).listen(3000)

//解析url
function parseUrl(url){
	var obj = {};
	var urls = url.split("&");
	for(var key in urls){
		var keyVal = urls[key].split("=");
		obj[keyVal[0]] = keyVal[1];
	}
	return obj;
}

test.html

<!DOCTYPE html>
<html>

	<head>
		<title>JSONP</title>
		<meta charset="utf-8">
		
	</head>

	<body>

		<script>
			function showPersion(data){
				alert("name: "+data.name+","+"age: "+data.age)
			}
		</script>
		<script src="http://127.0.0.1:3000?func=showPersion"></script>
	</body>

</html>

请求返回的值：

通过JSONP可以回避AJAX请求，通过脚本直接获取后台数据。

JSONP是跨域请求的一种方式，还有其他的方式：

服务器设置请求头
/**设置响应头允许ajax跨域访问**/
res.setHeader("Access-Control-Allow-Origin","*");
/*星号表示所有的异域请求都可以接受，*/
res.setHeader("Access-Control-Allow-Methods","GET,POST");