JSONP解决跨域问题怎么写

基于同源协议，许多网站不允许前端人员进行跨域数据请求。

而jsonp利用<script>标签，能够得到其他网站的 JSONP数据。

1.首先需要一个全局函数。这个函数是回调函数，由script的src地址访问之后回调的。

function getdata(data){
    console.log(data)//这里会接收参数，就是嗦访问网站返回回来的数据。
}

2.在文件中插入script标签：

//生成script标签元素
let script = document.createElement("script");
//script标签的src为数据请求地址,最后加上&callback=getdata(前面写好的全局函数的名字)
        script.src = "http://mobilecdn.kugou.com/api/v3/search/hot?format=jsonp&plat=0&count=30&callback=getdata;
        document.head.appendChild(script);   //将script元素放到head里 

重点是src部分=请求的路径+ "&callback=getdata"

这样就会在访问结束之后，回调getdata函数，并将请求到的数据塞到参数位置。

3.在需要数据的地方 ，调用回调函数，接收回数据。

 

这里做一点实例补充，如果是结合react写的代码，回调函数必须是全局函数，那么可以挂到window的身上，不然无法接收数据。

  window.getkrc=(res)=>{
            this.setState({
                data:res.data   
            })
        }
        let script = document.createElement("script");
        script.innerHTML="function getKrc(data){console.log(data)}"
        script.src = "http://mobilecdn.kugou.com/api/v3/search/hot?format=jsonp&plat=0&count=30&callback=getkrc";
        document.head.appendChild(script);   

我在window身上挂在了getkrc函数。并且吧接收到的数据直接存到了我当前js的的state状态里，因此我就可以通过this.state.data拿到数据了；