apache解决 同一个IP不同端口的JS跨域问题

系统 1837 0

 

问题:我这边有一个即时通信的服务器,提供给开发人员一个JS API来访问这个通信服务器,然而开发人员把JS文件拷贝到本机的web应用时去调用远程的即时通信服务器,出现了跨域的情况。现在我们这边只通了JS的api,因此必须解决这个跨域的问题。

 

解决方案:将apache服务器和web应用服务器放在同一个服务器上,分别处于不同的端口,通 过 document.domain=”IP地址” 设置域来发送请求给apatch服务器界面 ,最终返回即使通信服务器的响应内容。

 

1、在本机上安装一个apache,默认端口是80,然后里面添加如下内容

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script>
	//这个是本机的IP地址
	document.domain = "172.16.14.77";
	function doTestLogin()
	{
		var jid = document.getElementById('jid').value;
		var pwd = document.getElementById('pass').value;
alert("iframe 里面的值变换了");
	}
	</script>
  </head>
<body >

	1. 测试登录:<Br/> 
	用户名:<input type="text"  id="jid" value="a"/> 
	密  码:<input type="text" id="pass" value="a" />&nbsp;&nbsp;
	<input type="button" value="登录" id="frm1" onclick="javascript:doTestLogin();" style="font-size: 12px;"/>

</body>
</html>
    

 

2、在开发应用上添加如下界面,使用的是tomcat容器,端口是8080

      <%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 引用apache服务器上的内容 -->
	<iframe id="ifm1" src="http://172.16.14.77/jwchat/testim.html"
		style="width: 100%; height: 300px;" ></iframe>
	
	<form name="frm1" id="frm1">
		1. 测试登录:<Br/> 
		用户名:<input type="text"  id="v_name" value="b"/> 
		密  码:<input type="text" id="v_pass" value="b" />&nbsp;&nbsp;
		<input id="btn1" name="btn1" type="button" value="test" style="font-size:12px"
			onclick="test_iframe();">
	</form>

</body>
</html>
<script type="text/javascript">
//这个是本机的IP地址
document.domain = "172.16.14.77";

function test_iframe() {
	var v_name = document.getElementById("v_name").value;
	var v_pass = document.getElementById("v_pass").value;
	//访问id为ifm1的iframe里面的id为jid控件的值为v_name
	top.ifm1.jid.value=v_name; 
	top.ifm1.pass.value=v_pass; 
	top.ifm1.frm1.click();
}
</script>
    

 

在地址栏中输入:http:// 172.16.14.77 :8080/myweb/current.jsp,点击按钮,把当前用户输入的值传入到iframe里面,然后由iframe里面的界面提交表单发送请求,最终交由apache处理请求。

 

备注:地址栏一定要是172.16.14.77,不能用于localhost,因为浏览器判断是否是是跨域没有经过DNS服务器转换,仅仅是根据地址栏中的 172.16.14.77 :8080判断的,否则两个页面中输入的 document.domain = "172.16.14.77";会导致脚本报错

 

运行结果

apache解决 同一个IP不同端口的JS跨域问题

apache解决 同一个IP不同端口的JS跨域问题


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论