分布式系统跨域调用问题
在分布式系统中, 大部分在后台做远程调用, 从hession,到dubbo、dubbox , spring cloud 等,所以前台感觉不到跨域问题, 但是有些特殊要求,需要做前端远程调用
从A系统调用B系统页面,在这里不考虑权限问题 ,因为某些系统单点、授权等方式。
调用方式:
1、ajax ,
大部分人用jquery 做为基础框架,那么以jquery 为基础。
直接使用ajax 是不允许跨域 ,报错调用端不允许,那么怎么解决?
首先在调用ajax 增加头部,如下
$.ajax({
url: href,
type: "GET",
dataType:"html",
beforeSend: function (xhr) {
xhr.setRequestHeader("content-type", "web");
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
},
success: function(data,status){
//On ajax success do this
console.info("load page "+href+" is success.");
renderTable(data);
},
error: function(xhr, ajaxOptions, thrownError) {
//On error do this
console.info("error."+ajaxOptions+",status:"+xhr.status+","+thrownError);
}
});
这样是允许了调用界面能发出ajax请求,那接收端也要增加对应的回应。
一般如果某个系统需要支持跨域 ,只要增加一个过滤器配置即可,过滤器内容如下
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CrossDomainFilter implements Filter {
@Override
public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain filterChain) throws IOException, ServletException {
// 强制类型转换
HttpServletRequest request = (HttpServletRequest) arg0;
HttpServletResponse response = (HttpServletResponse) arg1;
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
/*
解决引用出现跨域问题
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.ttf
*/
//跨域设置-start
final String origin = request.getHeader("origin");
if (origin!=null && origin.trim().length()>0) {
response.setHeader("Access-Control-Allow-Origin", origin);
} else {
response.setHeader("Access-Control-Allow-Origin", "*");
}
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "OPTIONS,GET,PUT,POST,DELETE,HEAD");
response.setHeader("Access-Control-Max-Age", "2592000");
response.setHeader("Access-Control-Allow-Headers","content-type,access-control-allow-origin,access-control-request-headers,access-control-request-method,accept,origin,authorization,x-requested-with,serviceName,locale");
//跨域设置-end
//放行、将请求转发到目的地
filterChain.doFilter(request, response);
}
@Override
public void init(FilterConfig arg0) throws ServletException {
// TODO Auto-generated method stub
}
@Override
public void destroy() {
// TODO Auto-generated method stub
}
}
然后在, web.xml 中增加过滤配置
<!-- 支持跨域 -->
<filter>
<filter-name>crossDomainFilter</filter-name>
<filter-class>org.smartsoft.core.servlet.CrossDomainFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>crossDomainFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
好了,这样就可以A 系统界面访问B系统了。
提示,如果调用的B系统没有支持跨域 ,那么这种方式失效!
2、窗体
无论使用IFrame还是使用 href + target ="_blank" 弹新界面方式,都可以直接调用B界面内容就行了。
所以这是一种很安全的方式,很多插件跨域方式就是使用隐藏的iframe 加载B界面,再用javascript 回写出来。
3、script 方式
网传最著名的 ajax 使用jsonp 方式,就是使用script 方式,原理是动态将要加载界面连接在A界面上写个script 标签,连接为javascript 内容,然后等加script 加载完后,再调用。这种方式适合B界面是纯javascrpt 或json 数据。如果是界面html ,xml 就不适用。
以上是目前用得最多的前端跨域 调用。新的html5 如果是仅仅A,B界面通信 ,那使用postmessage 方式即可。
相关推荐
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo