解決方案總結(jié)：

1、打開(kāi)新網(wǎng)頁(yè)，瀏覽器輸入：??chrome://flags/#block-insecure-private-network-requests，改成Disabled，重啟瀏覽器。（需要客戶手動(dòng)操作，不采納）

2、給img添加crossOrigin 屬性（此方法不好用，can i use顯示瀏覽器不支持img 標(biāo)簽的 src跨域問(wèn)題

3、<meta name="referrer" content="no-referrer-when-downgrade" /> 參考：change referrer-policy in react js（未采用不適合項(xiàng)目）

4、前端設(shè)置方法（?參考HTTP請(qǐng)求之referrer與Referrer-Policy）
???????① 通過(guò)Referrer-Policy HTTP header設(shè)置：Referrer-Policy: origin

????????②通過(guò)<meta>元素改變Referrer Policy，直接修改名為referrer的內(nèi)容

　　<meta name="referrer" content="origin">

????????③ 給 <a>?<area><img><iframe>?或<link>元素設(shè)置referrerpolicy屬性

　　<a href="http://example.com" referrerpolicy="origin">

????????④ 如需設(shè)置不顯示referrer信息，可以給 <a><area>?<link>元素設(shè)置rel的鏈接關(guān)系。

　　<a href="http://example.com" rel="noreferrer">

---

react，img標(biāo)簽src獲取圖片提示跨域，

<img src={originSrc[i]} key={i} />

控制臺(tái)提示：

Access to image at 'http://127.0.0.1:15284/C:/Users/28929/camera_0.jpg?1655275037147' from origin 'http://171.5.37.13' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`. Access to image at 'http://127.0.0.1:15284/C:/Users/28929/camera_1.jpg?1655275037147' from origin 'http://171.5.37.13' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.

分析：

1、谷歌94版本上基本上端口號(hào)4位成功，5位失敗，此時(shí)誤以為是端口5位數(shù)導(dǎo)致（端口隨機(jī)生成），但隨著操作次數(shù)增多發(fā)現(xiàn)，4位端口號(hào)也會(huì)失敗，如下：

Access to image at 'http://127.0.0.1:1042/C:/Users/28929/camera_0.jpg?1655279684455' from origin 'http://171.5.37.13' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.

?2、谷歌84版本，4、5位端口號(hào)都獲取圖片成功，查看資料得知Chrome 新的默認(rèn) Referrer-Policy : strict-origin-when-cross-origin

?3、后來(lái)又看到一篇文章：HTTP請(qǐng)求之referrer與Referrer-Policy?，對(duì)比成功和失敗發(fā)現(xiàn)

? ? 失敗：

GeneralRequest URL: http://127.0.0.1:23246/C:/Users/28929/camera_0.jpg?1655279684455Referrer Policy: strict-origin-when-cross-origin Response HeadersReferer: http://171.5.37.13/...

成功：

GeneralRequest URL: http://127.0.0.1:23382/C:/Users/28929/camera_0.jpg?1655280203114Request Method: GETStatus Code: 200 OKRemote Address: 127.0.0.1:23382Referrer Policy: strict-origin-when-cross-origin Response Headers...Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9Connection: keep-aliveHost: 127.0.0.1:23382Referer: http://172.27.1.144/...

試了一把，誒？

<img src={originSrc[i]} referrerpolicy='origin' key={i} />

好像靠譜，至此問(wèn)題終于解決。

總結(jié)寫在文章最開(kāi)頭，方便大家快速找到解決方案。

總結(jié)

以上是生活随笔為你收集整理的Chrome高版本浏览器img通过src获取图片失败的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。