在项目中需要通过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() { Mapjson = new HashMap (); 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", "*"); Mapjson = new HashMap (); 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() { Mapjson = new HashMap (); json.put("info", "下单成功! "); json.put("status", "1"); String callback=getRequest().getParameter("callback"); json.put("res", true); String jsonp=callback+"("+JsonKit.toJson(json)+")"; renderJson(jsonp); } }