跨域的几种实现方式

时间:2022-06-23
本文章向大家介绍跨域的几种实现方式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

首先,跨域就是浏览器为了保护你的安全,禁止一个网站向和它不同域名的网站发送ajax请求。比如如果浏览器当前处于http://localhost:3001网站下,那么它无法发送请求到http://localhost:3002

下面我们在localhost:3001访问3002中的api。

JSONP实现跨域

JSONP是一个比较投机的方式,它利用的是浏览器对script标签的跨域没有限制这一特性来实现发送请求。

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
</head>

<body>
    <script>
        // 这里是api的回调
        function handleResult(resp) {
            alert(resp.name);
        }
    </script>
    <!-- 这里访问不同域下的api -->
    <script type="text/javascript" src="http://localhost:3002/controller"></script>
</body>

</html>

而API也不能返回单纯的json了,因为json是纯数据,script标签加载之后并不会产生任何动作。API应该返回包装了回调函数调用的数据,这个函数的参数就是实际JSON数据。如下:

handleResult({
	"name": "app2"
})

这样,当浏览器加载了localhost:3002/controller,它会把响应数据当作js脚本来处理,然后就是调用回调函数handleResult,并把实际的响应传回去。下面是调用成功的一个例子:

然而,这用到一个api就要一个script标签,这让人无法忍受,Jquery封装了jsonp的调用:

<html>

<head>
    <script type="text/javascript" src="jquery.js"></script>
</head>

<body>
    <script>
    	$(document).ready(function(){
            $.ajax({
                type : "get",
                async: false,
                url : "http://localhost:3002/controller",
                dataType: "jsonp",
                jsonp:"callback",
                jsonpCallback: "jsonhandle",
                success : function(data) {
                    alert("name:" + data.name);
                }
            });
        });
    </script>
</body>

</html>

这里的jsonp代表请求中参数的名字,jsonCallback代表回调函数的名字,这会在url中组合成localhost:3002?${jsonp}=${jsonpCallback}的形式

Jsonp实现跨域的一个缺点就是,它无法发布post请求,只能发布get请求。

原文地址:https://www.cnblogs.com/lilpig/p/16406365.html