新版Angular通过HttpClient获取图片遇跨域错误，如何解决？

嘿，这个问题我之前开发的时候也踩过坑！你遇到的是**跨域资源共享（CORS）**的浏览器安全限制问题，和你写的HttpClient逻辑关系不大，核心是目标图片服务器没有允许你的前端源（http://localhost:4200）访问它的资源。

先拆解下错误：浏览器会在跨域请求时发送预检请求，目标服务器返回的响应里没有包含允许你的源的CORS头，所以浏览器直接拦截了响应，抛出了这个错误。

下面给你几种不同场景的解决方案：

1. 如果你能控制目标图片服务器 #

直接在服务器端配置CORS响应头，允许你的前端源访问：

• 添加响应头 Access-Control-Allow-Origin: http://localhost:4200（开发环境），生产环境换成你的正式域名
• 要是想临时允许所有源测试，可以用 Access-Control-Allow-Origin: *（注意：生产环境不建议这么做，会有安全风险）

不同服务器的配置方式举例：

• Node.js/Express：用cors中间件，指定origin为你的前端地址
• Nginx：在location块里添加add_header Access-Control-Allow-Origin http://localhost:4200;
• Java Spring：在接口或控制器上添加@CrossOrigin(origins = "http://localhost:4200")注解

2. 如果你不能控制目标服务器（开发环境） #

用Angular的代理配置来绕过CORS限制，原理是让Angular开发服务器帮你转发请求：

1. 在项目根目录创建proxy.conf.json文件，内容如下（把target换成你的图片服务器域名）：

   {
     "/image-proxy": {
       "target": "https://你的图片服务器域名",
       "secure": false,
       "changeOrigin": true,
       "pathRewrite": {"^/image-proxy": ""}
     }
   }
   

2. 修改angular.json里的serve配置，添加代理文件路径：

   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
       "browserTarget": "你的项目名:build",
       "proxyConfig": "proxy.conf.json" // 新增这一行
     },
     // ...其他配置
   }
   

3. 修改你的imageLoad方法里的请求URL，把原来的图片地址改成/image-proxy/图片的相对路径，比如原来的https://xxx.com/abc.jpg改成/image-proxy/abc.jpg

3. 生产环境无法控制目标服务器的情况 #

可以通过以下两种方式解决：

• 用Nginx做反向代理：把前端请求的图片路径转发到目标服务器，这样前端和代理服务器同域，就不会有CORS问题
• 让你的后端服务帮忙转发：前端请求自己的后端接口，后端去调用目标图片服务器的接口获取图片，再返回给前端

另外，给你的代码提个小优化建议：你现在用的bypassSecurityTrustHtml其实不太合适，因为你是要生成图片的URL，应该用bypassSecurityTrustUrl，修改后的代码如下：

import { SafeUrl } from '@angular/platform-browser';
// ...其他导入

private imageLoad(url: string): Observable<SafeUrl> {
  return this.http.get(url, {responseType: 'blob'})
    .pipe(
      map(blob => this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(blob)))
    );
}

这样返回的SafeUrl更适合作为<img>标签的src属性值。

内容的提问来源于stack exchange，提问作者Шерзод Ёров