2017-03-08 81 views
0

我有一個本地文件a.html,如下所示,它可以通過https://localhost/a.html啓動。通過點擊Open b,它可以打開另一個文件b.html,然後通過Send按鈕,它可以通過postMessage發送數據:Make localhost/... popup localhost:3000/

<html> 
    <body> 
    <p onclick="openWindow()">Open b</p> 
    <form> 
     <input type="button" value="Send"> 
    </form> 

    <script> 
     function openWindow() { 
     var popup = window.open("https://localhost/b.html", "popup", "width=200, height=200"); 
     // var popup = window.open("https://localhost:3000/#/new", "popup", "width=1000, height=1000"); 

     var button = document.querySelector("form input[type=button]"); 
     button.onclick = function(e) { 
      e.preventDefault(); 
      e.stopPropagation();  
      popup.postMessage("hi, how are you?", popup.location.href); 
     } 
     } 
    </script> 
    </body> 
</html> 

現在,而不是打開https://localhost/b.html,我想開一個頁面https://localhost:3000/#/new本地應用服務。所以我取消註釋var popup = window.open("https://localhost:3000/#/new", "popup", "width=1000, height=1000");。然後在打開它會引發錯誤:

Uncaught DOMException: Blocked a frame with origin "https://localhost" from accessing a cross-origin frame. 
    at HTMLInputElement.button.onclick (https://localhost/a.html:20:49) 

如此看來,https://localhost/https://localhost:3000/被視爲跨域

有沒有人有任何解決方法或解決方法,使https://localhost/a.html打開https://localhost:3000/#/new

編輯1:我使用Mac。實際上,當進行製作時,所有內容都將放在同一個域www.myexample.com之下,其中包含像a.html這樣的靜態文件並運行服務器。我只想在Mac中爲localhost開發一個簡單的解決方案。

編輯2:一個限制是,我必須打開a.htmlhttps://localhost/a.html;我不允許使用http或將其作爲靜態文件(即https://localhost:3000/a.html)。

+0

他們只是交叉原點,你需要像nginx的反向代理使他們成爲同一臺服務器。 –

+0

我使用mac,我只想在'localhost'中開發一個簡單的解決方案,請參閱我的PS ... – SoftTimur

+0

你用什麼來提供文件?本地主機上的https只不過是愚蠢的,因爲大多數瀏覽器專門處理本地主機並添加一個自簽名證書是沒有意義的。 –

回答

0

一種解決方法是打開Chrome在一些特殊參數的終端:

open -a Google\ Chrome --args --disable-web-security --user-data-dir=/Users/SoftTimur/Desktop/user-data-dir 

我也嘗試了一些鍍鉻插件,它並沒有爲我的測試工作。

這將是巨大的,如果無需從終端每次打開瀏覽器,我們有一個解決方案(例如,一些設置)...

0

你已經提到你正在使用MEAN堆棧,所以我假定你正在使用ExpressJS。

它可以投放靜態的(發展):看http://expressjs.com/en/starter/static-files.html

不要使用HTTPS localhost上......它使沒有什麼更安全,只需添加一個不需要自簽名的證書。

對於更通用的解決方案,nginx可用於提供靜態文件並將其他路徑傳遞到後端。

+0

出於某種原因,我必須通過'https:// localhost/a.html'打開'a.html';我不能使用'http'或將其作爲靜態文件。請參閱我的更新。 – SoftTimur

+0

@SoftTimur詳述**爲什麼**你不能那樣做。你可能在做本地開發是錯誤的。 –

+0

實際上,'a.html'是我正在開發的一個微軟辦公室插件的主頁(通過javascript api辦公)。他們的規則是用'https'而不是'http'來引用主頁面。我們無法使用端口':3000'來引用主頁面。 – SoftTimur

相關問題