使用jQuery发送jsonp实现跨域

首先我们要知道什么叫做跨域？在了解跨域之前我们要明白一个东西，那就是同源策略。

同源策略：

同源：协议，域名，端口号必须完全相同，AJAX默认的就是符合这个策略，不符合的其实就叫做跨域。

那么怎么样去处理跨域呢？通过一个案例我们来看

前台代码：

<script>
        $('button').click(function() {
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp?callback=?', function(data) {
                $('div').html(`
                    姓名:${data.name},
                    省:${data.city[0]},
                    市:${data.city[1]},
                    县:${data.city[2]}
                `)
            })
        })
    </script>

通过jQuery调用getJSON函数实现跨域，这里注意最后要加上?callback=?固定写法

后台代码：

app.all('/jquery-jsonp', (request, response) => {
    //设置响应头   
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    const data = {
        name: 'xiaobai',
        city: ['山东', '菏泽', '郓城']
    };
    //将对象转换为字符串
    let str = JSON.stringify(data)
        //接收callback参数
    let cb = request.query.callback;
    response.send((`${cb}(${str})`));
});

这里需要接收callback 的参数。