JSONP跨域请求

最新推荐文章于 2024-06-20 20:55:24 发布

易安sparkle

最新推荐文章于 2024-06-20 20:55:24 发布

阅读量158

点赞数

分类专栏：跨域文章标签：跨域

本文链接：https://blog.csdn.net/weixin_43675447/article/details/89421193

版权

跨域专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JSON理解：

一种轻量级的数据交换格式；
JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串；
JSON.parse() ：从JSON字符串转换为JS对象

var obj=JSON.parse('{"a":"Hello","b":"World"}'); //结果是 {a:'Hello', b:'World'}

JSON.stringify() ：从JS对象转换为JSON字符串

var json=JSON.stringify({a:'Hello',b:'World'}); //结果是 '{"a":"Hello","b":"World"}'

优点：

基于纯文本，跨平台传递极其简单
JS原生支持，后台语言几乎全部支持
轻量级数据格式，占用字符数量极小，适合互联网传递
可读性较强
容易编写和解析

JSONP理解：

将json对象用符合js语法的形式包裹起来以使其他网站可请求到，即将json数据封装成js文件
原理：利用script标签可以跨域链接资源的特性
组成：回调函数和数据。回调函数一般在浏览器控制，作为参数发往服务器端；当服务器响应时，服务器端会把该函数和数据拼成字符串返回
缺点：JSONP只支持get；JSONP需要后端配合返回指定格式的数据

同源策略：

浏览器限制一个域名与另一个域名资源交互的规则
由于同源策略的存在，浏览器限制了跨域获取 cookie，也限制了跨域DOM节点的访问，有效的防止了CRSF攻击

JSONP跨域：
由于同源策略的限制，XHR只允许请求当前源（域名、协议、端口）的资源。若要进行跨域请求，可通过script标签实现，并在响应中返回要执行的script代码，其中可以直接使用JSON传递JS对象。

跨域的安全限制都是对浏览器端来说的，服务器端不存在跨域安全限制；
浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互；
若协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的；
若要在js里发起跨域请求，则要进行一些特殊处理。或者可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端。

使用jquery的jsonp如何发起跨域请求及其原理

准备环境：两个端口不一样，构成跨域请求的条件。

获取数据：获取数据的端口为9090
在这里插入图片描述
请求数据：请求数据的端口为8080

1.直接发起ajax请求
发起请求端的代码：

<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        $(document).ready(function () {            
            $("#btn").click(function () {
                $.ajax({
                    url: 'http://localhost:9090/student',
                    type: 'GET',
                    success: function (data) {
                        $(text).val(data);
                    }
                });
            });            
        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>

请求的结果如下图：可以看到跨域请求因为浏览器的同源策略被拦截了
在这里插入图片描述
2.如何发起跨域请求？
如jquery的jsop方式及其原理。

在页面上直接发起一个跨域的ajax请求是不可以的，但在页面上引入不同域上的js脚本却是可以的，就像可以在自己的页面上使用< img src=""> 标签来显示某个域上的图片一样。

例：在8080端口的页面上请求一个9090端口的图片
在这里插入图片描述
3.如何使用< script src="">来完成一个跨域请求？

当点击"跨域获取数据"按钮时，添加一个< script>标签，用于发起跨域请求；
注意看请求地址后面带了一个callback=showData的参数；
showData是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，因为是script脚本，所以自动调用showData函数，而result就是showData的参数。

<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        //回调函数
        function showData (result) {
            var data = JSON.stringify(result); //json对象转成字符串
            $("#text").val(data);
        }
        $(document).ready(function () {
            $("#btn").click(function () {
                //向头部输入一个脚本，该脚本发起一个跨域请求
                $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
            });
        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>

服务端：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");
    
    //数据
    List<Student> studentList = getStudentList();

    JSONArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();

    //前端传过来的回调函数名称
    String callback = request.getParameter("callback");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";
    response.getWriter().write(result);
}

结果：
在这里插入图片描述
4.jquery的jsonp方式跨域请求

服务端代码不变，js代码如下：

最简单的方式，只需配置一个dataType:‘jsonp’，就可以发起一个跨域请求；
jsonp指定服务器返回的数据类型为jsonp格式，可以看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称。

例1：这里的success就跟上面的showData一样，如果有success函数则默认success()作为回调函数。

<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                $.ajax({
                    url: "http://localhost:9090/student",
                    type: "GET",
                    dataType: "jsonp", //指定服务器返回的数据类型
                    success: function (data) {
                        var result = JSON.stringify(data); //json对象转成字符串
                        $("#text").val(result);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>

效果：
在这里插入图片描述
回调函数可以写到< script>下(默认属于window对象)，或指明写到window对象里，看jquery源码，可看到jsonp调用回调函数时，是调用的window.callback。

例2：success是返回成功后必定会调用的函数

<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        function showData (data) {
            console.info("调用showData");
            var result = JSON.stringify(data);
            $("#text").val(result);
        }
        $(document).ready(function () {
            $("#btn").click(function () {
                $.ajax({
                    url: "http://localhost:9090/student",
                    type: "GET",
                    dataType: "jsonp",  //指定服务器返回的数据类型
                    jsonpCallback: "showData",  //指定回调函数名称
                    success: function (data) {
                        console.info("调用success");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>

效果图：
在这里插入图片描述

总结：看调用结果，发现请求时带的参数：callback=showData；调用回调函数时，先调用了指定的showData，然后再调用了success。

例3：如何改变callback这个名称？
指定callback这个名称后，后台也需要跟着更改。

<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        function showData (data) {
            console.info("调用showData");
            var result = JSON.stringify(data);
            $("#text").val(result);
        }
        $(document).ready(function () {
            $("#btn").click(function () {
                $.ajax({
                    url: "http://localhost:9090/student",
                    type: "GET",
                    dataType: "jsonp",  //指定服务器返回的数据类型
                    jsonp: "theFunction",   //指定参数名称
                    jsonpCallback: "showData",  //指定回调函数名称
                    success: function (data) {
                        console.info("调用success");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>

后台代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");

    //数据
    List<Student> studentList = getStudentList();

    JSONArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();

    //前端传过来的回调函数名称
    String callback = request.getParameter("theFunction");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";
    response.getWriter().write(result);
}

效果图：
在这里插入图片描述
例4：看jsonp是否支持POST方式：ajax请求指定POST方式

<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                $.ajax({
                    url: "http://localhost:9090/student",
                    type: "POST",   //post请求方式
                    dataType: "jsonp",
                    jsonp: "callback",
                    success: function (data) {
                        var result = JSON.stringify(data);
                        $("#text").val(result);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>

效果图：
在这里插入图片描述

总结：jsonp方式不支持POST跨域请求，就算指定成POST，会自动转为GET；而后端若设置成POST方式，则无法请求。

jsonp的实现方式其实与< script>脚本请求地址的方式一样，只是ajax的jsonp对其做了封装，所以可想而知，jsonp是不支持POST方式的。

补充：
回到第一条：CORS头缺少“Access-Control-Allow-Origin”。

有时候你会发现其它都没问题，出现这个错误：这个错误代表服务端拒绝跨域访问。如果出现这个错误，就需要在服务端设置允许跨域请求。

response.setHeader(“Access-Control-Allow-Origin”, “*”); 设置允许任何域名跨域访问
在这里插入图片描述
设置可以跨域访问：第6行代码或第8行代码，设置其中一个即可。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");

    // * 表示允许任何域名跨域访问
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 指定特定域名可以访问
    response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");

    //数据
    List<Student> studentList = getStudentList();

    JSONArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();

    //前端传过来的回调函数名称
    String callback = request.getParameter("callback");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";

    response.getWriter().write(result);
}

小结：

jQuery ajax方式以jsonp类型发起跨域请求，其原理跟< script>脚本请求一样，因此使用jsonp时也只能使用GET方式发起跨域请求；
跨域请求需要服务端配合，设置callback，才能完成跨域请求。

易安sparkle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSONP跨域请求

跨域的安全限制都是对浏览器端来说的，服务器端不存在跨域安全限制；浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互；若协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的；若要在js里发起跨域请求，则要进行一些特殊处理。或者可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端。使用jquery的jsonp如何发起跨域请求及...
复制链接

扫一扫

专栏目录