JFinal跨域方法的两种实现
博客专区 > Jim_Ai 的博客 > 博客详情
JFinal跨域方法的两种实现
Jim_Ai 发表于2年前
JFinal跨域方法的两种实现
  • 发表于 2年前
  • 阅读 541
  • 收藏 8
  • 点赞 1
  • 评论 0

华为云·免费上云实践>>>   

摘要: 在项目中需要通过ajax方法远程调用其它JFinal服务器的服务,会报出No 'Access-Control-Allow-Origin' header is present on the requested resource错误。浏览器默认不允许跨域 。这里提供两种方法。

在项目中需要通过ajax方法远程调用其它JFinal服务器的服务,会报出No 'Access-Control-Allow-Origin' header is present on the requested resource错误。浏览器默认不允许跨域 。这里提供两种方法。

正常调用如下:

客户端

$.ajax({
			type : "post",
			url : "http://192.168.0.5/order",
			data : data,
			dataType : "json",
			contentType: "application/x-www-form-urlencoded; charset=UTF-8",
			async: false,
			cache: false,
			success:function(response){
				//扩展回调函数
				if( callback != null ){
					callback(response);
				}
			},
			error : function() {
				alert("服务器发生错误");
			}
		});

服务端

public class OrderController extends Controller {
	
	private static Logger log = Logger.getLogger(OrderController.class);
	
	public void index() {			
		Map<String, Object> json = new HashMap<String, Object>();
		json.put("info", "下单成功! ");
		json.put("status", "1");
		renderJson(json);				
		}
	}

此时发现跨域请求无法实现,有如下两种方法。

一、在服务端进行设置跨域许可设定。在controller方法中加入getResponse().addHeader("Access-Control-Allow-Origin", "*");即可。

public class OrderController extends Controller {
	
	private static Logger log = Logger.getLogger(OrderController.class);
	
	public void index() {
	    getResponse().addHeader("Access-Control-Allow-Origin", "*");	
	        	
		Map<String, Object> json = new HashMap<String, Object>();
		json.put("info", "下单成功! ");
		json.put("status", "1");
		renderJson(json);				
	}
}

二、通过jsonp进行。避免方法一的安全隐患。

客户端代码格式由json改为jsonp

$.ajax({
			type : "post",
			url : "http://192.168.0.5/order",
			data : data,
			dataType : "jsonp",
			contentType: "application/x-www-form-urlencoded; charset=UTF-8",
			async: false,
			cache: false,
			success:function(response){
				//扩展回调函数
				if( callback != null ){
					callback(response);
				}
			},
			error : function() {
				alert("服务器发生错误");
			}
		});

要理解json和jsonp的不同之处,对服务端返回格式进行调整

public class OrderController extends Controller {
	
	private static Logger log = Logger.getLogger(OrderController.class);
	
	public void index() {	       	
	        	
		Map<String, Object> json = new HashMap<String, Object>();
		json.put("info", "下单成功! ");
		json.put("status", "1");
		String callback=getRequest().getParameter("callback");
		json.put("res", true);
		String jsonp=callback+"("+JsonKit.toJson(json)+")";
		renderJson(jsonp);				
		}
	}


标签: JFinal 跨域 jsonp ajax
共有 人打赏支持
粉丝 4
博文 15
码字总数 7002
×
Jim_Ai
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: