JSONP解决跨域详解

ajax的jsonp实现跨域

- 原由

由于ajax的是通过XMLHttpRequest对象请求数据的，在同源的条件（协议，域名，端口号都相同）下，这没什么问题，但在不同源的情况下，浏览器是不允许XMLHttpRequest对象跨域请求的，所以便提出很多实现跨域的方案，如iframe，jsonp等方法，但jsonp最常用，其实jquery的$.ajax跨域请求就是通过jsonp实现的

- json详解

1.前端代码

<script>
    function jsonp(url, arg, fn) {
        
        //1.动态创建script标签，设置src属性
	        //1.1 地址请求格式： url?page=1&count=10&callback=fn
        var srpt = document.createElement('script');
        var queryString = '';
        for (var key in arg) {
            queryString += key + '=' + arg[key] + '&';
        }
        var funName = 'fun_' + Math.random().toString().substr(3);
        window[funName] = fn;
        url += '?' + queryString;
        url += 'callback=' + funName;
        srpt.src = url;
     //2.将创建好的script标签添加到页面上
        document.body.appendChild(srpt);
    }
    //url:"",arg:{},callback
    jsonp('http://127.0.0.1:3000/home.js', {page: 1, count: 10},
            function (data) {
                console.log(data.age,1);
            }
    );
//jsonp调用，请求http://127.0.0.1:3000/home.js?age=1&count=10&callback=fun_562156256(函数名是随机生成的，相应回来后，通过该回调函数处理取回的数据)
    jsonp('http://127.0.0.1:3000/home.js', {page: 1, count: 10},
            function (data) {
                console.log(data.age,2);
            }
    );
</script>

后端服务器代码

const express = require('express');
const app = express();
app.get('/home.js',(req,res)=>{
    var funName  = req.query.callback;
    res.send(funName+"({name:'jack',age:21,sex:'男'})");
});
app.listen(3000);