JSONP实现跨域

最新推荐文章于 2024-08-12 09:48:39 发布

浅笑⁹⁹⁶

最新推荐文章于 2024-08-12 09:48:39 发布

阅读量280

点赞数 1

分类专栏： # CSRF

本文链接：https://blog.csdn.net/qq_36374896/article/details/82770463

版权

CSRF 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

l 虚拟机搭建nodejs环境，全局安装qs模块

### npm install -g qs。
或者
npm install --save qs

在这里插入图片描述

l 虚拟机创建test.js界面，test.js存放于桌面，启动test.js。node test.js

var qs = require('qs');
var http = require('http');
var server = http.createServer();
server.on('request', function(req, res) {
    var params = qs.parse(req.url.split('?')[1]);
    console.log(params);
    var fn = params.callback;
    console.log(fn);
    // jsonp返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');

    res.end();
});
server.listen('80');
console.log('Server is running at port 80.');

在这里插入图片描述

l 配置本机页面1.html，访问本机页面http://本机IP/1.html，观察到弹窗，证明通过JSONP方法实现了两个不同域的信息传递。

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参并指定回调执行函数为onBack
    script.src = 'http://192.168.237.134/test?user=admin&callback=onBack';
    document.head.appendChild(script);

    // 回调执行函数
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>