jsonp实现跨域请求
2021-05-09 本文已影响0人
Splendid飞羽
核心原理：利用script标签可以跨过同源策略的限制，在其url后面 增加一个callback函数，函数封装传给后台的参数，比如script.src = 'http://localhost:8081?user=admin&callback=handleCallback';后台代码通过访问url中的callback参数获取到对应的fn，然后拼接对应的参数，将其返回，前端页面中定义的这个回调函数的实体就会执行。
项目根目录比较简单
image.png
1、创建项目根目录
mkdir http-server
cd http-server
npm init
这样就会创建一个包含package.json的空目录
2、使用http-server配置前端服务
使用http-server开启的本地服务器
http-server的安装：npm installl http-server -g
使用：在项目的根目录下，运行http-server，即会启动一个前端服务器，如下图：
这时候我们的前端服务构建完成，浏览器访问http://192.168.1.102:8081/ 即可打开前台页面
image.png
index.html的代码如下
<!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</title>
</head>
<body>
</body>
</html>
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
script.src = 'http://localhost:8081?user=admin&callback=handleCallback';
document.head.appendChild(script);
// 回调执行函数
function handleCallback(res) {
console.log(JSON.stringify(res));
}
</script>
3、使用nodejs模拟后台代码——server.js
后台nodejs代码结构，使用node server.js开启后台服务
1、node服务的端口就是上面的index.html中请求的端口哦
2、qs模块是对url中的参数进行序列化，需要安装 npm install qs
var http = require('http');
var qs = require('qs');
var server = http.createServer();
server.on('request', function(req, res) {
var params = qs.parse(req.url.split('?')[1]);
var fn = params.callback;
// jsonp返回设置
res.writeHead(200, { 'Content-Type': 'text/javascript' });
res.write(fn + '(' + JSON.stringify(params) + ')');
res.end();
});
server.listen('8081');//这里的端口一定要和script中的访问路径一致
console.log('Server is running at port 8080...');
注意：将前台服务和后台服务都启动完了后，就可以打开浏览器控制台，会看到控制台已经将后台穿回来的callback成功执行，并打印了其中的参数。（返回时即执行全局函数）
image.png
