跨域问题

1.利用javascript添加script标签实现。

var eleScript = document.createElement("script");
    eleScript.src = "https://douban.uieee.com/v2/book/1220562?callback=handleResponse";
    eleScript.type = "text/javascript";
document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
    
handleResponse = (response) => {
    var str = JSON.stringify(response);
    console.log(str);
}

<script type="text/javascript" src="example.json?callback=handleResponse"></script>
<script type="text/javascript">
    handleResponse = (response) => {
        console.log(response);
    }
</script>

缺点：

1，不能接受HTTP状态码
2，不能使用POST提交（默认GET）
3，不能发送和接受HTTP头
4，不能设置同步调用（默认异步）

2.用jQuery实现。

jsonpcallback = (data) => {
    console.log('jsoncallback' + JSON.stringify(data))
}
$('button').click(()=>{
    $.ajax({
        url: "https://douban.uieee.com/v2/book/1220562",
        type: "GET",
        dataType: "jsonp",
        jsonp: "callback", //指定后台的参数名
        jsonpCallback: "jsonpcallback", //指定回调函数名称
        success: function(data) {
            console.log(data);
        },
        error: function(err) {
            console.log(new Error('出错了' + err))
        }
    })
})

jsoncallback = (data) => {
    console.log('jsoncallback:' + JSON.stringify(data))
}
$.getScript("https://douban.uieee.com/v2/book/1220562?callback=jsoncallback")

$.getJSON('https://douban.uieee.com/v2/book/1220562', (json) => {
    console.log(json);
});

需要服务器设置header ：Access-Control-Allow-Origin。

3.用h5的window.postMessage实现

4.用Nginx实现

5.用Vue-cli的代理实现

未完待续。。。