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

butter7372 · 发表于 2017-1-14 06:31:41

问题：我这边有一个即时通信的服务器，提供给开发人员一个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" />  
<input type="button" value="登录" id="frm1"  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>

<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" />  
<input id="btn1" name="btn1" type="button" value="test" style="font-size:12px"
>
</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";会导致脚本报错
　　运行结果

账号		自动登录	找回密码
密码			立即注册

大疆运维招人啦，

C++ :try 语句块和异常处理

C++的多态

Red Hat RHCE 8 (EX294) Cert Guide

Java/C++ 区别：看完这一篇，就够用！

别再用过时库了！这 13 个顶级 C++ 库才是

c++ size_t 和 int 的区别

[经验分享] apache解决同一个IP不同端口的JS跨域问题

浏览过的版块

扫码加入运维网微信交流群

[经验分享] apache解决 同一个IP不同端口的JS跨域问题

浏览过的版块

[经验分享] apache解决同一个IP不同端口的JS跨域问题