【TaoTao】使用JQueryJsonp 完美解决JS跨域问题

╰半夏微凉° 2022-07-11 04:26 212阅读 0赞

# 问题描述： #

我有一段资源.json文件是放到后台的taotao-rest提供服务的接口项目当中，我前台另起了一个maven的项目taotao-portal。web服务器都是Tomcat，后台端口8081，前台端口8082。当我从前台访问这一段json资源的时候，就出现了跨域问题。

提示了不同源的URL禁止访问

![Center][]

# 什么是JS跨域： #

JS为了安全，有个限制，不允许跨域访问，简单的说就是域名不同就是跨域了，我们项目中遇到的是域名相同，端口不同。还有一种情况是IP不同。使用JS没有办法直接使用ajax（ajax请求受同源策略影响）请求rest后台提供的服务。

# 解决问题： #

在JS中可以使用jsonp解决跨域问题，在js中不能跨域，但是可以跨域请求一段片段，src加载的js片段。我们可以把数据包装成JS片段，写一个方法，把json数据作为参数传递。形成一个方法的调用语句。可以使用ajax请求js片段，当js片段到达浏览器会被立即执行，就可以获得数据参数了。在浏览器端，先创建好callback方法，在参数中获取数据。

如图所示：

![Center 1][]

# 代码思路： #

1.写callback函数

2.ajax请求，把方法名传递给服务端

3.服务端接收回调方法名，把数据包装好，响应给客户端。

# 代码： #

FN_GetData: function() {
        	//使用jsonp来实现跨域请求
            $.getJSONP(this.URL_Serv, category.getDataService);
        	//直接使用ajax请求json数据
    //    	$.getJSON(this.URL_Serv, function(json){
    //    		category.getDataService(json);
    //    	});
        },

URL_Serv: "http://localhost:8081/category.json?callback=category.getDataService",

# 总结： #

jQuery提供的getJsonp方法轻松的解决跨域访问的问题，可以获取json格式的数据。但是同样有问题存在，ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。jsonp请求服务器端数据，如果被不信任的服务使用时会很危险。

[Center]: /images/20220711/b0ddd9564e9844bf9ec76ad9ff7d5424.png
[Center 1]: /images/20220711/60570c2278dc42ebab25292d24c78313.png