AngularJS中图片src请求正常但$http遇CORS？如何检测img的404响应？

嘿，这两个问题我之前做AngularJS项目时刚好碰到过，给你详细解答下：

这核心是浏览器的同源策略和资源加载规则的差异：

• 像<img>、<script>、<link>这类「嵌入型资源」，是浏览器同源策略的例外情况——为了支持CDN、第三方图片托管这类通用场景，浏览器允许它们直接加载跨域资源，不需要目标服务器返回CORS相关的响应头。
• 而$http.get底层依赖的是XMLHttpRequest（XHR）接口，属于AJAX请求，这类请求严格受同源策略限制。如果目标服务器（这里是YouTube的图片服务器）没有配置Access-Control-Allow-Origin这类CORS授权头，浏览器就会拦截请求，抛出CORS错误。YouTube显然没有为AJAX请求开放跨域权限，所以你用$http访问就会报错。

在AngularJS里，最便捷的方式是利用ng-error指令（或者原生onerror事件）监听图片加载失败的事件，然后执行你的自定义逻辑，比如切换备用缩略图、提示用户等。

给你两种实用方案：

方案1：使用AngularJS内置的ng-error指令 #

修改你的<img>标签，加上ng-error绑定处理函数：

<!-- 记得用ng-src代替src，避免页面初始化时出现无效请求 -->
<img ng-src="{{element.video.thumb}}" ng-error="handleThumbError(element.video)">

然后在控制器中定义对应的处理函数：

$scope.handleThumbError = function(video) {
  // 这里执行你需要的业务逻辑，比如切换到低优先级的缩略图
  // YouTube提供的备用缩略图选项：hqdefault.jpg > mqdefault.jpg > default.jpg
  video.thumb = `https://img.youtube.com/vi/${video.videoId}/hqdefault.jpg`;
  
  // 也可以添加二次容错，比如再次失败就用更低分辨率的图
  // 或者执行其他逻辑，比如给用户提示
};

方案2：原生onerror事件（适合更灵活的场景） #

如果不想依赖AngularJS的指令，也可以直接用原生onerror事件，结合AngularJS的作用域访问：

<img ng-src="{{element.video.thumb}}" onerror="angular.element(this).scope().handleThumbError(element.video)">

控制器中的处理函数和方案1完全一致，这种方式适合需要更灵活控制的场景。

进阶优化：多优先级缩略图降级 #

你可以预设一组缩略图的优先级，在加载失败时依次降级，直到找到可用的图或者执行兜底逻辑：

$scope.handleThumbError = function(video) {
  // 定义缩略图优先级列表
  const thumbPriorityList = [
    `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`,
    `https://img.youtube.com/vi/${video.videoId}/hqdefault.jpg`,
    `https://img.youtube.com/vi/${video.videoId}/mqdefault.jpg`,
    `https://img.youtube.com/vi/${video.videoId}/default.jpg`
  ];
  
  // 找到当前缩略图的位置，切换到下一个
  const currentIndex = thumbPriorityList.indexOf(video.thumb);
  if (currentIndex < thumbPriorityList.length - 1) {
    video.thumb = thumbPriorityList[currentIndex + 1];
  } else {
    // 所有缩略图都失败，执行兜底逻辑
    console.log("所有YouTube缩略图加载失败");
    video.thumb = "/assets/default-video-thumb.jpg"; // 本地默认占位图
  }
};

内容的提问来源于stack exchange，提问作者SirWinning