2022年1月12日 星期三

HTML5 : CORS Referrer-Policy 設定影響載入聲音檔

2022年1月12日 星期三

前一陣幫 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


沒有留言:

張貼留言

 
雄::gsyan © 2009. Design by Pocket