問題：

發(fā)送Ajax請求,請求后端接口解析抖音無水印視頻并且展示在頁面中，后端已經(jīng)可以把解析后的訪問地址返回，通過瀏覽器訪問該地址也是沒有問題的，接著我通過Vue的綁點video的src,預(yù)期狀態(tài)應(yīng)該是可以被播放的,實際上點擊也沒反應(yīng),查看頁面代碼也發(fā)現(xiàn)video的src已經(jīng)設(shè)置了正確的視頻url

情景復(fù)現(xiàn):

前端發(fā)送請求到后端接口

我們前端打印獲取后端解析后的對象信息

鏈接在Video標(biāo)簽打不開

我們在查看元素標(biāo)簽

可以看出src已經(jīng)被替換成了正確的播放地址,那為什么視頻沒有播放,何況我已經(jīng)對video標(biāo)簽里面的屬性添加了autoplay="autoplay"那應(yīng)該會直接被播放,并且我點擊視頻界面也沒反應(yīng)

鏈接瀏覽器正常打開

把后端地址復(fù)制出來訪問看看有沒有可能是地址的原因,可以看出瀏覽器可以正常播放但是地址欄的鏈接好像發(fā)生了改變

出現(xiàn)的原理

可以知道訪問的鏈接應(yīng)該重新提交到了短視頻服務(wù)器獲取真實播放地址,其實控制臺有打印錯誤的信息提示

所以驗證了訪問的鏈接會重新提交到了短視頻服務(wù)器獲取真實播放地址
那403 (Forbidden)錯誤是啥呢?翻譯過來就是被禁止訪問的意思,如果是找不到會出現(xiàn)404標(biāo)識

那為什么會禁止,我們可以通過F12調(diào)用出控制面板,我前面看控制臺打印就已經(jīng)調(diào)出來了,我們可以看網(wǎng)絡(luò)(英文狀態(tài)是:Network)查看報紅的鏈接就是沒被請求成功的

那就要看我們請求信息攜帶了那些數(shù)據(jù)到服務(wù)端,請求頭類型介紹

第一眼看過去不說別的這個關(guān)鍵字Referer: http://localhost/攜帶的地址是我們本地,我們?nèi)ニ阉鬟@個關(guān)鍵字查看介紹

那問題就出現(xiàn)在,這里服務(wù)端是不是可以通過這個請求查看屬性,此次請求是通過那個界面訪問過來的,這個時候他們后臺會不會有這個判斷,如果存在這個Referer關(guān)鍵字,在判斷下這個鏈接地址是否是短視頻平臺的的地址,如果是就放行,如果不是就禁止訪問呢,我們也可以查看直接通過瀏覽器訪問請求地址都帶了啥

可以看出請求的值帶了很多到服務(wù)端

可以看出瀏覽器訪問沒有攜帶Referer關(guān)鍵字,是不是可以想下前面我說的那個邏輯是否正確,不賣關(guān)子了,就是這個關(guān)鍵字影響到了!

解決方式

前端解決

我們只需要在界面頭里面添加以下標(biāo)簽,意思是所有請求不發(fā)送 Referer關(guān)鍵字

<meta name=referrer content=no-referrer>

全局添加標(biāo)簽

我這種方式是全局頁面都添加了以下標(biāo)簽,因為我是在public包下的index.html中添加的這個是最簡單的

Vue單頁面添加標(biāo)簽

給Vue單頁面添加meta標(biāo)簽需要3個步驟:

1.安裝模塊:

npm install vue-meta --save

2.引用vue-meta模塊

main.js添加以下代碼

import VueMeta from 'vue-meta'
Vue.use(VueMeta)

3.頁面設(shè)置meta信息

  metaInfo: {
    title: 'This is the video',
    meta: [
      { charset: 'utf-8' },
      { name: 'referrer', content: 'no-referrer' }
    ]
  }

完美解決:

以上就是Vue項目Video標(biāo)簽播放解析后短視頻去水印視頻無響應(yīng)的詳細(xì)內(nèi)容，更多關(guān)于Video標(biāo)簽解析短視頻去水印無響應(yīng)的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論