浏览器安全是基于同源策略的。所谓同源策略就是三相同:
1,协议相同,
2,域名相同,
3,端口相同。
但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但不! !为了规避这种限制,其中有一方法就是JSONP。
JSONP的基本思想:就是通过& lt; script>的src,向服务器请求数据,且这不受同源策略限制(img和iframe的src也是如此),然后服务器将相应的数据放入指定的函数回调名中,返回给前端。
这,就实现了跨域请求信息。
如下图所示:
使用严格的;//通过需要将http库包含到程序中
var http=要求(“http”);//创建新的HTTP服务器
var服务器=http.createServer ();//通过请求事件来响应请求请求
服务器。(“请求”,函数(点播,res) {
res.writeHead(200年,{“内容类型”:“text/html; charset=utf - 8 '});
res.end(“地狱世界\ n”);
});//监听8080端口
server.listen (' 8080 ');//用于提示我们服务器启动成功
控制台。日志(“服务器运行!”);
接着,因为我们要对使用JSONP的请求与正常请求区分,所以,后台得判断处理,通过解析url字符串,假设这里我们是通过带有‘/JSONP’的路径名来判断。
如下:
使用严格的;//通过需要将http库包含到程序中
var http=要求(“http”);//引入url模块解析url字符串
var url=要求(url);//创建新的HTTP服务器
var服务器=http.createServer ();//通过请求事件来响应请求请求
服务器。(“请求”,函数(点播,res) {
var urlPath=url.parse (req.url) .pathname;//如果urlPath为‘jsonp’,就认定该请求为携带jsonp方法的http请求
如果(urlPath===/jsonp) {
res.writeHead(200年,{“内容类型”:“application/json; charset=utf - 8”});
var data=https://www.yisu.com/zixun/{“名称”:“猴子”
};
data=https://www.yisu.com/zixun/JSON.stringify(数据);//假设我们定义的回调函数名为测试
var调='测试' + '(' +数据+ ');;
res.end(回调);
}
其他{
res.writeHead(200年,{“内容类型”:“text/html; charset=utf - 8 '});
res.end(“地狱世界\ n”);
}
});//监听8080端口
server.listen (' 8080 ');//用于提示我们服务器启动成功
控制台。日志(“服务器运行!”);
之前
在上面的代码中19行,有个缺点就是,我们将回调函数的名字规定死了,当我们判断请求为JSONP时,只能往前端传入测试,这样显然不合理。
所以,我们得借助于属性这个模块,来处理查询字符串。
如下:
使用严格的;//通过需要将http库包含到程序中
var http=要求(“http”);//引入url模块解析url字符串
var url=要求(url);//引入字串模块处理查询字符串
var属性=要求(参数);//创建新的HTTP服务器
var服务器=http.createServer ();//通过请求事件来响应请求请求
服务器。(“请求”,函数(点播,res) {
var urlPath=url.parse (req.url) .pathname;
var qs=querystring.parse (req.url.split (“& # 63;”) [1]);
如果(urlPath==='/jsonp ',,qs.callback) {
res.writeHead(200年,{“内容类型”:“application/json; charset=utf - 8”});
var data=https://www.yisu.com/zixun/{“名称”:“猴子”
};
data=https://www.yisu.com/zixun/JSON.stringify(数据);
var调=qs.callback + '(' +数据+ ');;
res.end(回调);
}
其他{
res.writeHead(200年,{“内容类型”:“text/html; charset=utf - 8 '});
res.end(“地狱世界\ n”);
}
});//监听8080端口
server.listen (' 8080 ');//用于提示我们服务器启动成功
控制台。日志(“服务器运行!”);
