同一個IP不同埠的JS跨域問題
阿新 • • 發佈：2019-01-27
問題：我這邊有一個即時通訊的伺服器，提供給開發人員一個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" 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" /> <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";會導致指令碼報錯
執行結果
