http跨域问题 jsonp原理

最新推荐文章于 2022-09-18 11:59:10 发布

lukezhang-123

最新推荐文章于 2022-09-18 11:59:10 发布

阅读量1.1w

点赞数

分类专栏：点点滴滴文章标签： jsonp jsonp原理跨域jsonp

本文链接：https://blog.csdn.net/c5113620/article/details/79132680

版权

点点滴滴专栏收录该内容

18 篇文章 0 订阅

订阅专栏

http跨域的另一种解决办法：
http 跨域请求header设置–cors

【需求】
为了安全，浏览器不允许js代码跨域访问，但是多应用时，又需要跨域访问
【思路】
html的标签是可以访问和加载跨域资源，尤其是[script]标签的src属性
【jsonp原理】
js代码【动态】创建script标签，src【指定】要跨域访问的资源，返回【待回调】的js代码，页面打开时【埋入】的回调函数执行处理返回的数据

【过程模拟一】
根据jsonp原理模拟

//origin.html  内容
<!DOCTYPE html>
<html>
<head>
    <title>js cross origin</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
    function cors(data){
        console.log(data);
    }
    function load(){
        var obody=document.getElementsByTagName("body").item(0);
        var oscript=document.createElement("script");
        oscript.src="test.js"; 

        obody.appendChild( oscript); 
    }
    function ajax(){
        $.ajax({
            url:"http://127.0.0.1:8080/serv/test.js",
            type:"POST",
            success:function(res){
                console.log(les);
            }
        });
    }
</script>
<button onclick="load()">run</button>
<button onclick="ajax()">ajax run</button>
</body>
</html>

//test.js 内容，与origin.html同目录
cors("cors data from cross domain")

访问：http://localhost:8080/serv/origin.html
点击ajax run报跨域错误，点击run加载成功，成功执行

【过程模拟二】
使用jsonp

//只修改origin.thml
<!DOCTYPE html>
<html>
<head>
    <title>js cross origin</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
    function cors(data){
        console.log(data);
    }
    function load(){
        var obody=document.getElementsByTagName("body").item(0);
        var oscript=document.createElement("script");
        oscript.src="test.js"; 

        obody.appendChild( oscript); 
    }
    function ajax(){
        $.ajax({
            url:"http://127.0.0.1:8080/serv/test.js",
            type:"POST",
            success:function(res){
                console.log("ajax success");
                console.log(res);
            }
        });
    }
    function jsonp(){
        $.ajax({
            url:"http://127.0.0.1:8080/serv/test.js",
            type:"POST",
            dataType:"JSONP",
            jsonp:"cors",
            success:function(res){
                console.log("jsonp success");
                console.log(res);
            }
        });
    }
</script>
<button onclick="load()">run</button>
<button onclick="ajax()">ajax run</button>
<button onclick="jsonp()">jsonp run</button>
</body>
</html>