現象:
ローカル開発画像リスト、画像アクセス 403、表示できません
CSS背景画像リクエストエラー403
画像リクエストは正常です
理由:
403 は、ホット リンクを防止するためのエラーです (この設計は、API メーカーがサーバーにトラフィックが殺到しないようにするためのものです)。
解決する:
方法 1:
非リファラー ソリューションを使用して、画像のホットリンクだけでなく、他のタグへの
ホットリンクも防止します。
<meta name="リファラー" content="リファラーなし" />
リファラーを設定します:
1) HTMLページの<head>ヘッダー領域にメタタグを使用してリファラー属性を追加します
<meta name="リファラー" content="リファラーなし" />
2) Vue2 プロジェクトはページ上の「template」タグに直接記述できます
2. 対応するタグに属性を追加します
リファラー
<!-- タグのリファラー -->
<a href="http://example.com" Referrer="no-referrer|origin|unsafe-url">xxx</a>のいくつかのステータス
<!-- img/image标签のリファラー -->
<img Referrer="no-referrer|origin|unsafe-url" src="{ {
item.src}}"/>
<image Referrer="no-referrer|起源|安全でない URL" src="{
{item.src}}"></image>
<!-- 要素タグのリファラー -->
<el-image
style="width: 100px; height: 100px"
:src="url"
:preview-src-list="srcList"
:initial-index="4"
:referrer-policy='no-referrer'
フィット="カバー"
/>
要素の公式 Web サイトを表示 el-image には属性があります
リファラーポリシー:'リファラーなし'