問題：

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

情景復現(xiàn):

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

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

鏈接在Video標簽打不開

我們在查看元素標簽

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

鏈接瀏覽器正常打開

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

出現(xiàn)的原理

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

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

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

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

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

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

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

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

解決方式

前端解決

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

<meta name=referrer content=no-referrer>

全局添加標簽

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

Vue單頁面添加標簽

給Vue單頁面添加meta標簽需要3個步驟:

1.安裝模塊:

npm install vue-meta --save

2.引用vue-meta模塊

main.js添加以下代碼

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

3.頁面設置meta信息

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

完美解決:

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

最新評論