問(wèn)題：

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

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

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

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

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

我們?cè)诓榭丛貥?biāo)簽

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

鏈接瀏覽器正常打開(kāi)

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

出現(xiàn)的原理

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

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

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

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

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

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

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

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

解決方式

前端解決

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

<meta name=referrer content=no-referrer>

全局添加標(biāo)簽

我這種方式是全局頁(yè)面都添加了以下標(biāo)簽,因?yàn)槲沂窃趐ublic包下的index.html中添加的這個(gè)是最簡(jiǎn)單的

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

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

1.安裝模塊:

npm install vue-meta --save

2.引用vue-meta模塊

main.js添加以下代碼

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

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

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

完美解決:

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