JSONP跨域访问

女爷i 2022-03-22 13:55 345阅读 0赞

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

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

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

3、准备SpringBoot项目二  
[https://pan.baidu.com/s/1xmV4vv1-hzA-2D310Nu-Qg][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

注意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>
    在这里插入代码片

[https_pan.baidu.com_s_1auKV0P7BksP9k5kabw8FEA]: https://pan.baidu.com/s/1auKV0P7BksP9k5kabw8FEA
[https_pan.baidu.com_s_18oAUTOz0fk53knyAuXvHsg]: https://pan.baidu.com/s/18oAUTOz0fk53knyAuXvHsg
[https_pan.baidu.com_s_1xmV4vv1-hzA-2D310Nu-Qg]: https://pan.baidu.com/s/1xmV4vv1-hzA-2D310Nu-Qg