如何解决Angular中加载跨域图片的CORS问题？

你遇到的net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200错误，是因为目标图片服务器未配置符合跨源嵌入资源策略（COEP）的响应头，浏览器默认将资源视为同域后触发了安全拦截。以下是几种可行的解决方法：

方法一：使用Angular DomSanitizer处理图片URL #

通过DomSanitizer标记图片URL为安全资源，避免Angular的安全策略拦截：

1. 在组件中引入并注入DomSanitizer：

import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-site-list',
  templateUrl: './site-list.component.html'
})
export class SiteListComponent {
  constructor(private sanitizer: DomSanitizer) {}

  sanitizeImageUrl(url: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

2. 修改模板中的图片绑定：

<div class="col-12 d-flex col-xs-12 col-sm-6 col-md-4 col-lg-3 mb-4"
    *ngFor="let site of category.sites">
    <a class="card-link" href="#">
       <h6 class="text-muted d-flex justify-content-center mb-2" style="font-size: 20px;">
      {{site.url}}
       </h6>
       <img class="img-fluid news-logo" [src]="sanitizeImageUrl(site.img)">
    </a> 
</div>

方法二：配置本地代理服务器（开发环境适用） #

通过Angular代理将图片请求转发到目标域名，绕过浏览器跨域限制：

1. 在项目根目录创建proxy.conf.json文件：

{
  "/image-proxy": {
    "target": "https://thehill.com",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/image-proxy": ""
    }
  }
}

2. 在angular.json的serve配置中指定代理文件：

"projects": {
  "your-project-name": {
    ...
    "architect": {
      "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
          "browserTarget": "your-project-name:build",
          "proxyConfig": "proxy.conf.json"
        }
      }
    }
  }
}

3. 修改图片URL为代理路径，比如将https://thehill.com/wp-content/uploads/...改为/image-proxy/wp-content/uploads/...

方法三：要求图片服务器配置响应头 #

如果有权限调整目标服务器的配置，添加以下响应头之一即可解决：

• Cross-Origin-Embedder-Policy: unsafe-none：允许跨域嵌入资源（测试环境可用，不推荐生产）
• Cross-Origin-Embedder-Policy: require-corp：仅允许符合跨源资源共享（CORS）的资源嵌入
• Cross-Origin-Resource-Policy: cross-origin：明确允许其他域名加载该资源

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