Angular向大华IP摄像头发起GET请求获取快照时遭遇CORS问题求助

兄弟，我太懂你这种浏览器能直接访问但前端框架请求就卡CORS的憋屈了！咱们先搞清楚为啥会这样：

浏览器的同源策略在搞事情——你本地Angular项目的域名（比如localhost:4200）和摄像头的IP不属于同一个源，而摄像头的CGI服务器没配置允许跨域请求的响应头，所以浏览器直接给你拦截了，但直接在地址栏访问的时候，浏览器不会触发跨域检查，所以能正常显示快照。

针对你的大华DH-IPC-HFW1230S1N-0280B-S摄像头，给你几个可行的解决方案：

方案一：检查摄像头是否支持CORS配置 #

先登录摄像头的Web管理后台，找找「网络设置」或者「HTTP服务」相关的选项，有些大华型号会提供跨域访问的开关，比如允许指定域名或者所有域名发起跨域请求。如果能找到这个配置，直接开启并添加你的Angular项目域名（本地开发就是http://localhost:4200），问题基本就能解决。

方案二：用Angular代理绕过CORS（本地开发首选） #

本地开发时，Angular自带的代理功能可以帮你绕过浏览器的跨域限制，具体操作步骤：

1. 在你的Angular项目根目录新建一个proxy.conf.json文件，内容如下：

   {
     "/camera-snapshot": {
       "target": "http://cameraIP",  // 替换成你的摄像头实际IP
       "secure": false,
       "changeOrigin": true,
       "pathRewrite": {
         "^/camera-snapshot": "/cgi-bin/snapshot.cgi"
       }
     }
   }
   

2. 把你Angular里的GET请求地址改成/camera-snapshot?loginuse=[你的账号]&loginpas=[你的密码]（或者你试过的其他参数格式，比如u和p）
3. 启动项目的时候加上代理参数：ng serve --proxy-config proxy.conf.json

这样请求会先转发到Angular的代理服务器，再由代理服务器去请求摄像头，就不会触发浏览器的CORS检查了。

方案三：自己搭后端中转（生产环境推荐） #

如果是要部署到生产环境，或者摄像头本身不支持CORS配置，那可以在自己的后端服务器（比如Node.js、Java、Python都行）写一个接口，前端请求这个后端接口，然后由后端去调用摄像头的快照接口，再把快照数据返回给前端。因为后端之间的HTTP请求不受浏览器同源策略的限制，完美避开CORS问题。

另外补充一点：URL里直接用login:password@cameraIP的形式，有些服务器可能不支持解析这种身份验证方式，所以你用参数传递账号密码的格式（比如?loginuse=xxx&loginpas=xxx）其实更稳妥，记得确认摄像头API文档里的参数名是否正确哦！

备注：内容来源于stack exchange，提问作者Manuel David Alonso Munoz