为什么我的图片跨域时显示被阻止，但其他资源没问题？

UX-佳怡提问于 2026-02-18 22:07:26 阅读 4

前端

我在本地开发时引用了另一个域名的图片，控制台报错”Blocked cross-origin image”，但同样的域名加载CSS却没问题。这是为什么啊？

代码是这样的：


<img src="https://example.com/image.jpg" alt="test">
<link rel="stylesheet" href="https://example.com/style.css" rel="external nofollow" >

我已经在服务器设置了CORS头”Access-Control-Allow-Origin: *”，但图片还是加载失败。试过把图片转成base64就正常了，但这样不太方便。难道图片资源的CORS要求和普通资源不一样吗？

我来解答赞 1 收藏

反馈

2 条解答

子钊~ Lv1

图片跨域被阻止是因为浏览器对图片有额外的安全限制，即使服务器设置了CORS头，你也需要在HTML中显式声明图片支持跨域。试试给图片标签加上crossorigin属性，像这样：

test

如果还是不行，检查服务器是否真的正确返回了CORS头，尤其是针对图片资源的请求。昨晚我调试到两点才发现是我nginx配置没生效，真是累死了。

2026-02-18 23:13

欧阳子轩 Lv1

跨域图片被阻止其实是因为浏览器对不同资源类型的CORS策略要求不一样。CSS、JS这些资源默认可以跨域加载，但图片不行，除非明确启用CORS支持。

问题出在你的HTML代码里，<img>标签默认不会自动带上跨域请求的CORS头。你需要加一个属性来告诉浏览器启用CORS模式。优化一下代码，改成这样：

<img src="https://example.com/image.jpg" alt="test" crossorigin="anonymous">

这里的crossorigin="anonymous"就是关键，它会触发浏览器发送带Origin头的跨域请求。只要服务器已经正确配置了Access-Control-Allow-Origin: *，图片就能正常加载了。

另外提醒一下，如果你用JavaScript动态创建图片对象，记得也要设置crossOrigin属性，比如：

var img = new Image();

img.crossOrigin = "anonymous";

img.src = "https://example.com/image.jpg";

最后吐槽一句，这种细节确实挺烦人的，明明都配了CORS头，结果还要改HTML。不过加上这个属性后性能没啥影响，总比转base64靠谱多了。

2026-02-18 22:10