前一陣幫 HTML5 Spelling 單字高手加上用 Google TTS 念單字的功能，本機測試都沒有問題，只要透過 web server 玩HTML5單字高手，Google TTS 就是出不來，而無法載入的 error.code 代碼是 4，也就是「MEDIA_ERR_SRC_NOT_SUPPORTED」；但是同樣的程序與方法在我的另外兩支程式是可以用的。倒是發現它們有的是別的狀況，在我測試時，尚未壓縮 JavaScript 的版本，本機可以用，放到自己架的 web server 不能正常運作，但是壓縮過的版本，放到 GitHub 中的又可以用，真的是令人百思不得其解。因為本機及最後放到 GitHub 給大家用的，都正常運作，也就沒有認真探討問題。
這一次HTML5單字高手比較慘的是，在自己架設的 web server 及 GitHub 中，Google TTS 的語音一直無法播放。花了很多時間，把想過的問題點都試過了，還是沒解決。本來準備放棄 Google TTS，開始找別的 TTS 代替，也因為這樣，把觸角又伸出去，找到了替代方案。哈～正當真的要放棄時，突然靈機一動，把 HTML 單字高手載入 JavaScript 的網頁，和另外兩個可以正常播放 Google TTS 的網頁，以 WimMerge 進行了 HTML 原始碼的比對，好的！當然是有重大發現，在另外兩個網頁中的 <head> 中都多了這一行：
- <meta name="referrer" content="no-referrer" />
而之前無法載入 Google TTS 時，看到的 HTTP 錯誤代碼 404 時，訊息中的是：
Referrer Policy: strict-origin-when-cross-origin
 |
| 未設定 Referrer Policy 出現 HTTP 404 |
關鍵字「Referrer Policy」出現了！
當我把 referrer 的 meta 那行加入 HTML5 單字高手的網頁中，果然打通了任督二脈，Google 小姐可以正常開口念英文單字了！
 |
| 在網頁中加入 referrer，並設為 no-referrer |
Referrer Policy 可以怎麼設，在 MDN WebDocs 中的這份文件很有參考價值：
當然，可以更一步的參考一下 MDN WebDocs 中這一份文件談到 CORS 是怎麼一回事：
以我的需求來說，大概就只能用這兩個：
- no-referrer
- same-origin
 |
| no-referrer |
 |
| same-origin |
發表文章
沒有留言:
張貼留言