HTML <img> 跨域属性

HTML 中的 <img> 标签可以用于展示图片，但是当图片的来源与当前网页不在同一个域下时，就会出现跨域问题。这时可以使用 <img> 标签的 crossorigin 属性来解决跨域问题。

什么是跨域问题？

“跨域”指的是两个不同域名（或端口、协议）之间的交互，比如 A 网站的页面向 B 网站发送请求，或者加载 B 网站的资源。由于浏览器的同源策略限制，跨域操作受到了许多限制。

跨域限制是为了保护用户隐私和安全，避免恶意网站发送伪造请求获取用户数据，所以跨域请求一般需要经过验证才能发送成功。

crossorigin 属性的作用

当 <img> 标签中的 src 属性引用的图片位于其他域名下时，如果没有设置 crossorigin 属性，则图片会因为跨域限制而无法加载。

设置 crossorigin 属性后，浏览器会发送一个跨域请求头，通知图片服务器允许该跨域请求，从而使图片能够正常加载。crossorigin 属性有 4 个可选值，分别是：

• anonymous：表示跨域请求不会发送用户凭证（如 cookie、Authorization 等）。
• use-credentials：表示跨域请求会发送用户凭证（一般用在需要用户登录的场合）。
• none：表示该 img 元素不发送 CORS 请求。
• 空值：与 anonymous 值相同。

使用示例

<!-- 设置 crossorigin="anonymous" 属性后，允许该标签加载跨域图片 -->
<img src="http://example.com/image.jpg" crossorigin="anonymous" />

<!-- 设置 crossorigin="use-credentials" 属性后，允许该标签发送用户凭证请求 -->
<img src="http://example.com/image.jpg" crossorigin="use-credentials" />

需要注意的是，除了在 <img> 标签中使用 crossorigin 属性，还可以在 <script> 标签、<link> 标签和 <video> 标签中使用该属性来解决跨域问题。同时，服务器端也需要支持 CORS（跨域资源共享）才能实现跨域操作。

结语

设置 crossorigin 属性是解决跨域问题的一种简单又有效的方式，但需要同时考虑安全性和实际需求，合理选用不同的属性值进行跨域请求。