前言
富文本中復制百度百科的一份知識，在項目預覽時發現圖片顯示不出來，報403問題， 圖片地址用新網址打開正常顯示 原因：403是防止盜鏈的錯誤（這種設計，是api廠商正常保證自己的服務器不被刷流量）
解決
-
方案一：使用no-referrer
在head 中添加
<meta name="referrer" content="no-referrer"
/>
防盜鏈的機制： 通過頁面的referrer信息，判斷訪問者來源，是否本站點，然后對圖片等請求作出相應
no-referrer： 1、整個 Referer 首部包含了當前請求頁面的來源頁面的地址，即表示當前頁面是通過此來源頁面里的鏈接進入的。 2、服務端一般使用 Referer 首部識別訪問來源，可能會以此進行統計分析、日志記錄以及緩存優化等。 3、首部會被移除。訪問來源信息不隨著請求一起發送。 官當定義文檔 ： https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy
隱藏請求體中標注來源referrer字段，referrer字段只能隱藏，不能定制， 這樣服務器端的防盜鏈就無法檢測
-
方案二：使用images.weserv.nl
getImage(url){ console.log(url); // 把現在的圖片連接傳進來，返回一個不受限制的路徑 if(url !== undefined){ return url.replace(/^(http)[s]*(\:\/\/)/,'https://images.weserv.nl/?url='); } }
把圖片路徑直接傳進去,把原來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是一種圖像緩存和調整大小服務。Images.weserv.nl服務器會調整您的圖像大小，在全球范圍內緩存并顯示它。
拓展
PS: meta一覽表
<meta
charset="utf-8">
<!-- 設置文檔字符編碼 -->
<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標簽須放在head標簽最前面;其它head內容放在其后面，如link標簽-->
<!-- 允許控制加載資源 -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'">
<!-- 盡可能早的放在文檔 -->
<!-- 只適用于下面這個標簽的內容 -->
<!-- 使用web應用程序的名稱(當網站作為一個應用程序的時候)-->
<meta
name="application-name"
content="Application Name">
<!-- 頁面的簡短描述(限150個字符)-->
<!-- 在某些情況下這個描述作為搜索結果中所示的代碼片段的一部分。-->
<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網站管理員工具的特定元標記，核實對谷歌搜索控制臺所有權 -->
<meta
name="google-site-verification"
content="verification_token">
<!-- 說明用什么軟件構建生成的網站，(例如,WordPress,Dreamweaver) -->
<meta
name="generator"
content="program">
<!-- 簡短描述你的網站的主題 -->
<meta
name="subject"
content="your website's subject">
<!-- 很短(10個詞以內)描述。主要學術論文 -->
<meta
name="abstract"
content="">
<!-- 完整的域名或網址 -->
<meta
name="url"
content="https://example.com/">
<meta
name="directory"
content="submission">
<!-- 對當前頁面一個等級衡量，告訴蜘蛛當前頁面在整個網站中的權重到底是多少。General是一般頁面，Mature是比較成熟的頁面，Restricted代表受限制的。 -->
<meta
name="rating"
content="General">
<!-- 隱藏發送請求時請求頭表示來源的referrer字段。 -->
<meta
name="referrer"
content="no-referrer">
<!-- 禁用自動檢測和格式的電話號碼 -->
<meta
name="format-detection"
content="telephone=no">
<!-- 通過設置“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">
<!-- 地理標簽 -->
<meta
name="ICBM"
content="latitude, longitude">
<meta
name="geo.position"
content="latitude;longitude">
<meta
name="geo.region"
content="country[-state]"><!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" -->
<meta
name="geo.placename"
content="city/town"><!-- 如 content="New York City" -->
[1] [2] 下一頁
| 
