[Web] 使用正確的 Content-Type 來下載 Dropbox 分享出來的檔案

[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 站台囉~

(本頁面已被瀏覽過 456 次)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料