JSONP实现跨域

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>

在这里插入图片描述

posted @ 2018-09-19 12:44  浅笑996  阅读(95)  评论(0编辑  收藏  举报