JavaScript跨域问题解决办法

2019独角兽企业重金招聘Python工程师标准>>>

一、什么是跨域

       JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：

      首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：

特别注意两点：

       第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，

       第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

       接下来简单地总结一下在“前台”一般处理跨域的办法，后台proxy这种方案牵涉到后台配置，这里就不阐述了，有兴趣的可以看看yahoo的这篇文章：《JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls》

二、js调用接口跨域问题处理

以下截图为js调用接口出现跨域问题：

       加window.name参数   +   配置Allow-Origin头   可处理：

接口做这两个处理的部分代码如下：

JSONObject json = new JSONObject();
//跨域参数
String origin = request.getHeader("Origin") == null? "www.baidu.com.cn" : request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Origin", origin); 
String windowName = env.param("windowName", null); //window.name
if("POST".equals(method)){        //判断方法是否post
    ....
}else{
	 json.put("uri", uri);
	 json.put("result", "0");
	 json.put("msg", "请求方法不是POST,操作失败");
} 

if (!T.isBlank(windowName) && "1".equals(windowName)) {	
	request.setAttribute("json", "<script>window.name='" + json.toJSONString() + "';</script>"); 
} else {
	request.setAttribute("json", json.toJSONString());
}

接口做了以上两个处理，能解决跨域问题，能成功post数据到接口了。

备注：上图代码中origin跨域代码中，更优写法如下：

//跨域参数
String origin = request.getHeader("Origin");
if (!T.isBlank(origin)) {
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Origin", origin);
}

三、跨域参考资料以及详细总结

       http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

转载于:https://my.oschina.net/xsh1208/blog/496467