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

原创 2013年12月04日 10:22:42

 

问题:我这边有一个即时通信的服务器,提供给开发人员一个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";会导致脚本报错

 

运行结果

  • 大小: 21.1 KB

前端解决跨域问题的8种方案(最新最全)

原文:http://www.cnblogs.com/JChen666/p/3399951.html 1.同源策略如下: URL 说明 是否允许通信 ...
  • Joyhen
  • Joyhen
  • 2014年03月20日 16:52
  • 195823

什么是跨域?怎么解决跨域问题?

什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。 所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子...
  • lambert310
  • lambert310
  • 2016年06月15日 17:32
  • 115796

跨域的几种方式

什么是跨域:协议、端口号、域名 都相同才是同一个域 只要有一个不同就算是跨域但是实际工作中,尤其是大公司,经常遇到需要跨域的情况跨域的几种方式:跨域的几种常见的方式有: jsonp iframe f...
  • yoany
  • yoany
  • 2016年07月06日 18:29
  • 4946

JS跨域问题,及在同一个服务器上布置两个网站

部署网站 网站部署后,地址如果用一样的,那么就分配不同的端口,端口默认80,新增的端口在设置之后还需要在防火墙中的出站规则中添加一下, 不然外部访问不了。 什么是跨域 我们经常...
  • YiQiJinBu
  • YiQiJinBu
  • 2016年07月15日 14:28
  • 3452

解决常见接口跨域问题

常用方法解决跨域问题:1.jsonp 2.iframe 3.postMessage 4.服务器代理 5.cors设置
  • shenmill
  • shenmill
  • 2016年10月29日 01:01
  • 6774

Ajax请求跨端口问题的描叙及解决

phfile项目结构: view里的接口定义: 以8080启动phfile项目. 浏览器访问:http://127.0.0.1:8080/test/ 可以得到正确的结果:{"status": ...
  • u012643122
  • u012643122
  • 2016年10月31日 21:10
  • 2823

thinkPHP——跨域问题

  • w582324909
  • w582324909
  • 2016年11月23日 14:40
  • 1927

ajax跨域问题(三种解决方案)

为什么会出现跨域 跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其...
  • u014727260
  • u014727260
  • 2017年05月28日 17:23
  • 3447

微信开发之本地接口调试(非80端口,无需上传服务器服务器访问)

前言: 本文是总结在开发微信接口时,为方便开发所采取的一些快捷步骤,已节省开发人员难度开发时间从而提高开发效率。 本地测试: (提醒,在本地模拟微信get或post数据时先将校验参数注释掉) ...
  • hotnet522
  • hotnet522
  • 2015年03月03日 10:57
  • 4913

同一个ip,不同端口号,session失效

问题在一台物理机上放了两个Tomcat,然后,放了两个工程,发现,在系统A中登录会把B系统的用户踢下来;简单来说,配置如下 server上放着TomcatA和TomcatB;projectA放在To...
  • wangjun5159
  • wangjun5159
  • 2016年09月01日 16:36
  • 2704
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:同一个IP不同端口的JS跨域问题
举报原因:
原因补充:

(最多只允许输入30个字)