[Web] 使用正確的 Content-Type 來下載 Dropbox 分享出來的檔案
大概是之前在痞客邦的網誌寫了蠻久,
或者是痞客邦的 SEO 真的有比較強 (?),
現在這個新架的 WordPress 網站流量,大部分都還是從痞客邦轉來的。
而我轉流量的方式是在痞客邦的站台上加了 JavaScript,
讓它可以在開啟痞客邦的文章時,就自動轉到對應的 WordPress 站台的同樣文章
(可以參考 將痞客邦文章自動跳轉至 WordPress 這篇)
不過這幾天發現 WordPress 新站的來客量大幅下降,
去查了一下痞客邦的網誌,發現 JavaScript 沒有自動跳轉了。
用 Chrome Developer Tools 看一下 console 視窗,
發現有個 Refused to execute script from … because its MIME type (application/binary)
is not executable, and strict MIME type checking is enabled 的錯誤訊息:
這裡的 https://rebrand.ly/dropb1983 是我先把 JavaScript 檔放在 Dropbox 裡,
再用短網址服務,把 Dropbox 分享出來的檔案網址縮成 https://rebrand.ly/dropb1983。
用 curl 試著抓一下這個網址,發現最後 Dropbox 吐出來的 Content-Type,
是 application/binary,而非預期的 application/javascript:
testuser@localhost ~ $ curl -L -v -A "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36" https://rebrand.ly/dropb1983 ...... * Issue another request to this URL: 'https://www.dropbox.com/s/3a6a53hky870ubm/my_pixnet.js?dl=1' ...... * Issue another request to this URL: 'https://dl.dropboxusercontent.com/content_link/RKoXCSVZcYZQ8p59ddgSuNOeGgnUxNjmeYuwnq0uU4bArhIsNaAlTyxJvons8W9F/file?dl=1' ...... < Content-Type: application/binary < content-disposition: attachment; filename="my_pixnet.js"; filename*=UTF-8''my_pixnet.js ......
既然 Content-Type 是 Dropbox 伺服器回傳的,
那麼能不能在 Dropbox 上設定某個檔案應該用什麼類型呢?
如果 Dropbox 能將 Content-Type 傳回 application/javascript,
Chrome 應該就不會遇到 MIME type (application/binary) is not executable 的問題了~
上網查了一下,發現已經有人問一樣的問題
Is it possible to set Content type of a file (i.e mime type) using Dropbox API?
官方的回應是 Dropbox 會看附檔名來決定 Content-Type 要回傳什麼。
但我原本的檔名 my_pixnet.js 明明副檔名就是 .js,
為啥 Dropbox 會以為那個 js 檔的類型是 application/binary 呢?
查了一下 Dropbox Public Folder Shared URL Fix 這篇,
裡面有提到 Dropbox 分享出來的檔案,可以有 3 種不同的連結方式:
- dl=0
- dl=1
- raw=1
而我原本的短網址 https://rebrand.ly/dropb1983
會導向到 https://www.dropbox.com/s/3a6a53hky870ubm/my_pixnet.js?dl=1,
猜測 Dropbox 把所有 dl=1 的網址 Content-Type 都設成 application/binary,
這樣可以促使瀏覽器觸發檔案下載~
但為了讓 my_pixnet.js 可以正常在網頁中被執行,
它的 Content-Type 應該要是 application/javascript…
實驗了一下,使用 raw=1 格式的網址是可以達到需求的。
我們再次用 curl 來看一下結果:
testuser@localhost ~ $ curl -L -v -A "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36" https://www.dropbox.com/s/3a6a53hky870ubm/my_pixnet.js?raw=1 ...... < Content-Type: application/javascript ......
噹噹~這次拿到的 Content-Type 就是預期的 application/javascript~
於是把痞客邦上的程式改成去抓 raw=1 的網址,
果然 MIME type (application/binary) is not executable 的錯誤訊息沒有出現,
而且 my_pixnet.js 的程式也被正常執行,將網頁重導向到新的 WordPress 站台囉~