前言
富文本中復(fù)制百度百科的一份知識，在項目預(yù)覽時發(fā)現(xiàn)圖片顯示不出來，報403問題， 圖片地址用新網(wǎng)址打開正常顯示 原因：403是防止盜鏈的錯誤（這種設(shè)計，是api廠商正常保證自己的服務(wù)器不被刷流量）
解決
-
方案一：使用no-referrer
在head 中添加
<meta name="referrer" content="no-referrer"
/>
防盜鏈的機(jī)制： 通過頁面的referrer信息，判斷訪問者來源，是否本站點，然后對圖片等請求作出相應(yīng)
no-referrer： 1、整個 Referer 首部包含了當(dāng)前請求頁面的來源頁面的地址，即表示當(dāng)前頁面是通過此來源頁面里的鏈接進(jìn)入的。 2、服務(wù)端一般使用 Referer 首部識別訪問來源，可能會以此進(jìn)行統(tǒng)計分析、日志記錄以及緩存優(yōu)化等。 3、首部會被移除。訪問來源信息不隨著請求一起發(fā)送。 官當(dāng)定義文檔 ： https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy
隱藏請求體中標(biāo)注來源referrer字段，referrer字段只能隱藏，不能定制， 這樣服務(wù)器端的防盜鏈就無法檢測
-
方案二：使用images.weserv.nl
getImage(url){ console.log(url); // 把現(xiàn)在的圖片連接傳進(jìn)來，返回一個不受限制的路徑 if(url !== undefined){ return url.replace(/^(http)[s]*(\:\/\/)/,'https://images.weserv.nl/?url='); } }
把圖片路徑直接傳進(jìn)去,把原來url前面的http:///https://替換或者直接在圖片url前加上 https://images.weserv.nl/?url=
解釋： Images.weserv.nl is an image cache & resize service. Our servers resize your image, cache it worldwide, and display it. Images.weserv.nl是一種圖像緩存和調(diào)整大小服務(wù)。Images.weserv.nl服務(wù)器會調(diào)整您的圖像大小，在全球范圍內(nèi)緩存并顯示它。
拓展
PS: meta一覽表
<meta
charset="utf-8">
<!-- 設(shè)置文檔字符編碼 -->
<meta
http-equiv="x-ua-compatible"
content="ie=edge"><!-- 告訴IE瀏覽器，IE8/9及以后的版本都會以最高版本IE來渲染頁面。 -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- 指定頁面初始縮放比例。-->
<!-- 上述3個meta標(biāo)簽須放在head標(biāo)簽最前面;其它head內(nèi)容放在其后面，如link標(biāo)簽-->
<!-- 允許控制加載資源 -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'">
<!-- 盡可能早的放在文檔 -->
<!-- 只適用于下面這個標(biāo)簽的內(nèi)容 -->
<!-- 使用web應(yīng)用程序的名稱(當(dāng)網(wǎng)站作為一個應(yīng)用程序的時候)-->
<meta
name="application-name"
content="Application Name">
<!-- 頁面的簡短描述(限150個字符)-->
<!-- 在某些情況下這個描述作為搜索結(jié)果中所示的代碼片段的一部分。-->
<meta
name="description"
content="A description of the page">
<!-- 控制搜索引擎爬行和索引的行為 -->
<meta
name="robots"
content="index,follow,noodp"><!-- 所有搜索引擎 -->
<meta
name="googlebot"
content="index,follow"><!-- 谷歌 -->
<!-- 告訴谷歌搜索框不顯示鏈接 -->
<meta
name="google"
content="nositelinkssearchbox">
<!-- 告訴谷歌不要翻譯這個頁面 -->
<meta
name="google"
content="notranslate">
<!-- Google網(wǎng)站管理員工具的特定元標(biāo)記，核實對谷歌搜索控制臺所有權(quán) -->
<meta
name="google-site-verification"
content="verification_token">
<!-- 說明用什么軟件構(gòu)建生成的網(wǎng)站，(例如,WordPress,Dreamweaver) -->
<meta
name="generator"
content="program">
<!-- 簡短描述你的網(wǎng)站的主題 -->
<meta
name="subject"
content="your website's subject">
<!-- 很短(10個詞以內(nèi))描述。主要學(xué)術(shù)論文 -->
<meta
name="abstract"
content="">
<!-- 完整的域名或網(wǎng)址 -->
<meta
name="url"
content="https://example.com/">
<meta
name="directory"
content="submission">
<!-- 對當(dāng)前頁面一個等級衡量，告訴蜘蛛當(dāng)前頁面在整個網(wǎng)站中的權(quán)重到底是多少。General是一般頁面，Mature是比較成熟的頁面，Restricted代表受限制的。 -->
<meta
name="rating"
content="General">
<!-- 隱藏發(fā)送請求時請求頭表示來源的referrer字段。 -->
<meta
name="referrer"
content="no-referrer">
<!-- 禁用自動檢測和格式的電話號碼 -->
<meta
name="format-detection"
content="telephone=no">
<!-- 通過設(shè)置“off”,完全退出DNS隊列 -->
<meta
http-equiv="x-dns-prefetch-control"
content="off">
<!-- 在客戶端存儲 cookie，web 瀏覽器的客戶端識別-->
<meta
http-equiv="set-cookie"
content="name=value; expires=date; path=url">
<!-- 指定要顯示在一個特定框架中的頁面 -->
<meta
http-equiv="Window-Target"
content="_value">
<!-- 地理標(biāo)簽 -->
<meta
name="ICBM"
content="latitude, longitude">
<meta
name="geo.position"
content="latitude;longitude">
<meta
name="geo.region"
content="country[-state]"><!-- 國家代碼 (ISO 3166-1): 強(qiáng)制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" -->
<meta
name="geo.placename"
content="city/town"><!-- 如 content="New York City" -->
[1] [2] 下一頁
| 
