圖片跨域解決辦法
<img src="" id="img" crossorigin="anonymous">
核心是請(qǐng)求頭中包含了 Origin: "anonymous"或"*" 字段，響應(yīng)頭中就會(huì)附加上 Access-Control-Allow-Origin: * 字段。
同時(shí)也要開啟服務(wù)器CORS跨域訪問(wèn)設(shè)置。
MDN 文檔解釋crossOrigin 屬性
在HTML5中，一些 HTML 元素提供了對(duì) CORS 的支持， 例如<audio>、<img>、<link>、<audio>、<script>和 <video> 均有一個(gè)跨域?qū)傩?(crossOrigin property)，它允許你配置元素獲取數(shù)據(jù)的 CORS 請(qǐng)求。
在媒體元素上被使用的 crossorigin 內(nèi)容屬性是一個(gè) CORS 設(shè)置屬性。
這些屬性是枚舉的，并具有以下可能的值：
| 關(guān)鍵字 | 描述 |
|---|---|
anonymous |
對(duì)此元素的 CORS 請(qǐng)求將不設(shè)置憑據(jù)標(biāo)志。 |
use-credentials |
對(duì)此元素的CORS請(qǐng)求將設(shè)置憑證標(biāo)志；這意味著請(qǐng)求將提供憑據(jù)。 |
"" |
設(shè)置一個(gè)空的值，如 crossorigin 或 crossorigin=""，和設(shè)置 anonymous 的效果一樣。 |
默認(rèn)情況下（即未指定 crossOrigin 屬性時(shí)），CORS 根本不會(huì)使用。如 Terminology section of the CORS specification 中的描述，在非同源情況下，設(shè)置 "anonymous" 關(guān)鍵字將不會(huì)通過(guò) cookies，客戶端 SSL 證書或 HTTP 認(rèn)證交換用戶憑據(jù)。
即使是無(wú)效的關(guān)鍵字和空字符串也會(huì)被當(dāng)作 anonymous 關(guān)鍵字使用。
示例：使用 crossorigin 的 script 元素
你可以使用下面的 <script> 元素告訴瀏覽器執(zhí)行來(lái)自 https://example.com/example-framework.js 的腳本且不發(fā)送用戶憑據(jù)。
<script src="https://example.com/example-framework.js" crossorigin="anonymous"></script>
