jsonp实现跨域问题

jsonp的具体实现

1.创建一个exress项目，并安装jquery的依赖，在项目中创建两个服务器端的js文件，使它们监听不同的端口号，这样保证了它们的域名不同。

//server1.js
const express = require('express');
const app = express();

app.use(express.static('./'));

var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Example app listening at http://%s:%s', host, port);
});
//server2.js
const express = require('express');
const app = express();

app.get('/json-data',function (req,res) {
    res.json({name:'liyan'});
});

var server = app.listen(8000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Example app listening at http://%s:%s', host, port);
});

2.添加json.html文件，我想让json.html文件访问http://localhost:8000/json-data发送的数据，我使用ajax发送请求，代码如下：

<html>
<head>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script type="text/javascript">
        function loadData() {
            $.get('http://localhost:8000/json-data', function (data) {
                $('#data').text(data);
            });
        }
    </script>
</head>
<body>
<div>
    <button onclick="loadData()">please click me gain client data</button>
</div>
<div id="data"></div>
</body>
</html>

现在我启动服务器，去访问http://localhost:3000/json.html，但是我获取不到我想要的数据，出现了如下的错误：

错误提示

错误提示的意思是：不能请求http://localhost:8000/json-data下的资源，应为请求资源上不存在“访问控制允许源”的标头，因此不允许访问。

3.使用jsonp进行跨域访问

Web页面上调用js文件时是不受跨域的影响，如果想通过纯web端跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。

根据以上的原理，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了。

于是，我在server2.js的文件里添加如下的代码：

app.get('/jsonp-data',function (req,res) {
    res.jsonp({name:'liyan'});
});

使用jsonp发现我想要的数据，现在，我需要在客户端接受数据，并对他进行处理，修改json.html文件的代码，如下所示：

function loadData() {
            $.get({
                url:'http://localhost:8000/jsonp-data',
                dataType:'jsonp',
                success:function (data) {
                    $('#data').text(JSON.stringify(data))
                }
            })
        }

4.重新启动两个服务器，现在我访问http://localhost:3000/json.html点击按钮就可以获得http://localhost:8000/jsonp-data的资源了。

跨域成功

至此，jsonp解决跨域的简单例子就完成了。

jsonp实现跨域问题

jsonp的具体实现

推荐阅读更多精彩内容