JSONP跨域访问

最新推荐文章于 2025-05-23 06:48:24 发布

华科易迅

最新推荐文章于 2025-05-23 06:48:24 发布

阅读量487

点赞数

CC 4.0 BY-SA版权

分类专栏： SpringBoot

本文链接：https://blog.youkuaiyun.com/qixiang_chen/article/details/86680237

SpringBoot 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍如何在电商系统中利用JSONP实现跨域数据请求，包括配置Nginx代理、SpringBoot项目间的JS文件引入及数据交互，展示了三种不同场景下的JSONP应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Http协议中除去带src属性的标签外(img,js,iframe)，其他标签跨域访问是不允许的，但在电商系统中许多业务功能需要分布部署以提高系统稳定性与并发访问量。使用js可以从不同域名加载数据，JSONP就是利用实现跨域访问请求。通过JS加载远程的数据到本地浏览器，再编写JS方法显示这些数据。参考下面例程。

准备环境：
1、下载Window版Nginx
https://pan.baidu.com/s/1auKV0P7BksP9k5kabw8FEA

2、准备SpringBoot项目一
https://pan.baidu.com/s/18oAUTOz0fk53knyAuXvHsg

3、准备SpringBoot项目二
https://pan.baidu.com/s/1xmV4vv1-hzA-2D310Nu-Qg

4、配置Nginx代理两个域名下的SpringBoot项目

    server {
        listen       80;
        server_name  mydomain1.com;

        location / {
            proxy_pass http://localhost:6060;
        }
    }

    server {
        listen       80;
        server_name  mydomain2.com;

        location / {
            proxy_pass http://localhost:6061;
        }
    }

5、配置Window系统hosts文件解析域名

127.0.0.1	mydomain1.com

127.0.0.1	mydomain2.com

127.0.0.1	localhost

测试例程一

在SpringBoot项目一的JSP中引入mydomain2.com下的JS文件

<html>
<head>
<script type="text/javascript" src="http://mydomain2.com/js/mydatajs.js"></script>

<script>
	//调用mydatajs.js中的方法
	showName();
	//调用mydatajs.js中的数据
	var len = mydata.colleges.length;
	var str = '';
	for(var i=0;i<len;i++)
		str = str + mydata.colleges[i] +',';
	alert('mydatajs 名称='+mydata.name+',国家='+mydata.country+',大学='+str);

SpringBoot项目二新建mydatajs.js文件

mydata={
		name:'BeiJing',
		country:'China',
		colleges:['北大','清华','北航','北邮']
}

function showName()
{
	alert('Hello BeiJing');
}

测试例程二

引入远程JS方法，并调用回调JS方法

SpringBoot项目二的JS

showName2(
	{
			name:'BeiJing',
			country:'China',
			colleges:['北大','清华','北航','北邮']
	}	
);在这里插入代码片

SpringBoot项目一引入项目二的JS

<%@page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
<script type="text/javascript" src="http://mydomain2.com/js/mydatajs.js"></script>

<script>
	//调用mydatajs.js中的方法
	showName();
	//调用mydatajs.js中的数据
	var len = mydata.colleges.length;
	var str = '';
	for(var i=0;i<len;i++)
		str = str + mydata.colleges[i] +',';
	alert('mydatajs 名称='+mydata.name+',国家='+mydata.country+',大学='+str);
	
	var showName2 = function(data)
	{
		var len = data.colleges.length;
		var str = '';
		for(var i=0;i<len;i++)
			str = str + data.colleges[i] +',';
		alert('mydatajs2 名称='+data.name+',国家='+data.country+',大学='+str);
	}
	
</script>
<script type="text/javascript" src="http://mydomain2.com/js/mydatajs2.js"></script>
</head>
<body>
<h2>Hello World!</h2>
</body>
</html>

注意showName2必须定义在引入mydatajs2.js之前

测试例程三

向跨域JS传递参数，查询数据

在SpringBoot项目二新建JSP

<%@page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String city = request.getParameter("city");
	String callback = request.getParameter("callback");
	StringBuffer sb = new StringBuffer();
	
	if("BeiJing".equals(city))
	{
		sb.append(callback);
		sb.append("({");
		sb.append("name:'BeiJing',");
		sb.append("country:'China',");
		sb.append("colleges:['北大','清华','北航','北邮']");
		sb.append("});");
		out.print(sb.toString()); 
	}
	if("NanJing".equals(city))
	{
		sb.append(callback);
		sb.append("({");
		sb.append("name:'NanJing',");
		sb.append("country:'China',");
		sb.append("colleges:['南大','南航','南邮']");
		sb.append("});");
		out.print(sb.toString()); 
	}
%>

SpringBoot项目一引入JSP

<%@page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
<script type="text/javascript" src="http://mydomain2.com/js/mydatajs.js"></script>

<script>
	//调用mydatajs.js中的方法
	showName();
	//调用mydatajs.js中的数据
	var len = mydata.colleges.length;
	var str = '';
	for(var i=0;i<len;i++)
		str = str + mydata.colleges[i] +',';
	alert('mydatajs 名称='+mydata.name+',国家='+mydata.country+',大学='+str);
	
	var showName2 = function(data)
	{
		var len = data.colleges.length;
		var str = '';
		for(var i=0;i<len;i++)
			str = str + data.colleges[i] +',';
		alert('mydatajs2 名称='+data.name+',国家='+data.country+',大学='+str);
	}
	
	// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
    var url = "http://mydomain2.com/myjsonp.jsp?city=NanJing&callback=showName2";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script);
</script>
<script type="text/javascript" src="http://mydomain2.com/js/mydatajs2.js"></script>
</head>
<body>
<h2>Hello World!</h2>
</body>
</html>

使用JQuery跨域访问

在SpringBoot项目一上新建JSP

<%@page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

<script>

jQuery(document).ready(function(){ 
   $.ajax({
        type: "get",
        async: false,
        url: "http://mydomain2.com/myjsonp.jsp?city=BeiJing",
        dataType: "jsonp",
        jsonp: "callback",//获取jsonp回调函数名的参数名
        jsonpCallback:"showName2",//自定义的jsonp回调函数名称，必须非空，默认为jQuery自动生成的随机函数名
        success: function(json){
    		var len = json.colleges.length;
    		var str = '';
    		for(var i=0;i<len;i++)
    			str = str + json.colleges[i] +',';
            alert('名称=' + json.name + ' 国家=' + json.country + ' 大学='+str);
        },
        error: function(){
            alert('fail');
        }
    });
});

</script>

</head>
<body>
<h2>Hello World!</h2>
</body>
</html>
在这里插入代码片