jsonp跨域

一念思量LG

已于 2022-12-06 06:27:25 修改

阅读量3.8k

点赞数

分类专栏：前端文章标签：前端 javascript html

于 2022-12-06 03:39:42 首次发布

本文链接：https://blog.csdn.net/u014285237/article/details/128196166

版权

前端专栏收录该内容

21 篇文章 4 订阅

订阅专栏

由于浏览器的同源策略,前端请求存在跨域问题.jsonp解决跨域是利用了html的有些标签,例如script/link/img/iframe等的天生具有跨域请求的特点.例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="#" onfocus="this.blur();">测试</a>
</body>

<script type="text/javascript">
    function success(data){
        console.log("data===>",data);


    }
    // var script = document.createElement("script");
    // var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=色戒&cb=success";
    // script.src=url;
    // document.body.append(script);
</script>

<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=色戒&cb=success">
</script>
</html>

需要注意:

1 <meta charset="UTF-8"> 不能省,会报错

2 上面是两种写法,动态创建标签和直接使用

3 回调函数必须是全局的,如下面使用jquery的ajax反例

4 Jsonp只支持get请求浏览器地址输入方式都是get,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="#" onfocus="this.blur();">测试</a>
</body>
<script type="text/javascript" src="jquery-3.6.1.min.js"></script>
<script type="text/javascript">

    $.ajax({
        type:'GET',
        url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=大灰狼&cb=success',
        success:function success(data){
            console.log(data);
        }
    })
</script>

</html>

<!--报错如下图-->

<!--

下图共报了两个错.第一个是同源跨域错误,第二个是找不到success方法

-->

修改后:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="#" onfocus="this.blur();">测试</a>
</body>
<script type="text/javascript" src="jquery-3.6.1.min.js"></script>
<script type="text/javascript">
    function success(data){
        console.log(data);
    }
    $.ajax({
        type:'GET',
        dataType:'jsonp',
        url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=大灰狼&cb=success',
        success:function success(data){
            console.log(data);
        }
    })
</script>

</html>
<!--返回数据如下图-->

如果将url改成"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=大灰狼",也会报错,原因是返回数据格式问题,返回数据为

window.baidu.sug({q:"大灰狼",p:false,s:["大灰狼的故事 睡前故事","大灰狼和小白兔的故事睡前故事","大灰狼与小红帽的故事","大灰狼吃小羊的故事","大灰狼简笔画","大灰狼画报","大灰狼的拼音","大灰狼英语怎么读","大灰狼的名字叫什么","大灰狼拖走了羊妈妈,小羊为什么也不声不响地跟了去?"]});

另外,访问一些其他网站,如和风天气网站,就不需要前端做跨域jsonp处理,是因为网站后端做了处理,在返回的头中加了