Google Picker拒絕加載錯誤「未能在'DOMWindow'上執行'postMessage'：目標原點提供了」

Question

我想加載Google Picker。

我用這NPM包https://www.npmjs.com/package/google-picker

當裝載選擇器中，auth窗口顯示出來，而且我可以選擇我的谷歌帳戶。

驗證完成後，它會嘗試打開Goog​​le Picker iframe。

正是在這一點上的iframe加載失敗，我得到

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin

我已經搜索這個問題，很多解決方案，說確保您的域名添加到谷歌授權的JS起源錯誤控制檯

我已經做到了！該域名肯定位於客戶的授權域中。 Google登錄與我的應用程序一起工作..但我似乎無法讓Picker工作。

我已經嘗試從本地主機運行並上傳到服務器。但我得到同樣的錯誤。

我使用的服務器是HTTPS。而選取器的iframe網址也是HTTPS。所以這不應該是一個問題。

我還能試試嗎？我沒有選擇。我正在跟蹤API。我已經把所有正確的鑰匙。

Answer 1

原因谷歌選擇器中不顯示竟是無關的控制檯錯誤。

即使控制檯出現錯誤，選取器仍然可以正常工作。

但我認爲這是行不通的，因爲我使用的pickadate庫的css與Google Picker衝突。 https://github.com/amsul/pickadate.js/issues/619

Answer 2

從這個SO post answer，它被引用的問題是與目標來源是https。

我認爲這是一個問題，目標原點是https。我 懷疑這是因爲你的iFrame url使用http而不是 https。嘗試更改要嵌入的文件的網址爲 爲https。

例如：

var id = getId(url); 
    return '//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000'; 
} 

是：

var id = getId(url); 
    return 'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000'; 
}