調用外部鏈接,報403錯誤
背景:在開發一個視頻播放項目中video_ts(一個用typescript開發的視頻播放器)中調用MP4 資源的時候,無法播放,報403錯誤。然而直接在瀏覽器地址欄回車則可以正常播放。
報403錯誤則是訪問被拒絕,既然我做了跨域處理還被拒絕這里就要提及瀏覽器的防盜鏈機制。
防盜鏈機制
當你的項目和需要訪問的地址不在同一個域內,這時瀏覽器的防盜鏈機制就發揮作用了。其中防盜鏈是利用 HTTP header 中的 referer 來實現的。當瀏覽器向服務器發送請求時會帶上 referer ,來告訴服務器從哪個頁面鏈接過來的。
服務器通過識別 referer 來判斷請求是否是自己的域名,如果不是自己的域名就會攔截,不會將請求發送出去,如果是自己域名就可以繼續訪問。
請求發送成功的請求頭:

請求未發送成功的請求頭:(會有Referer字段)
解決方法
這里我采用的是比較暴力的方法,直接在標簽里加 meta
<meta name="referrer" content="never">
在某些情況網站想要控制頁面發送給服務器的 referer 信息時,可以使用 referer metadata 參數。
referer 的 metadata 屬性可以設置 content 屬性值為以下:
default never always origin default :若當前頁面使用的是 https 協議,而正要加載資源使用的是普通的 http 協議,則將 http header 中的 referer 置空; never :刪除 http header 中的 referer,所有從當前頁面發起的請求將不會攜帶 referer; always :不改變 http header 中的 referer 的值; origin :只發送 origin 部分;
