本地网页加载带HTTP认证的IP摄像头快照技术问题求助

我完全懂你这个困扰——Chrome禁用URL明文凭证后，想在本地页面调用需要认证的摄像头资源确实处处受限，尤其是还没法改摄像头的CORS设置。下面给你几个可行的解决方案，按易实现程度排序：

方案1：本地Node.js代理（最推荐） #

因为CORS是浏览器的安全限制，而服务器端请求不受这个约束，所以我们可以搭一个极简的本地代理，让前端请求代理服务器，再由代理去请求摄像头并带上认证信息，最后把图片返回给前端。

步骤如下：

1. 先安装Node.js（如果还没装的话）
2. 创建一个proxy-server.js文件，内容如下：

const http = require('http');
const url = require('url');

const server = http.createServer((req, res) => {
  const cameraUrl = url.parse('http://192.168.178.41/tmpfs/auto.jpg');
  // 将账号密码转为base64编码的认证头
  const auth = 'Basic ' + Buffer.from('admin:admin').toString('base64');

  const options = {
    hostname: cameraUrl.hostname,
    port: cameraUrl.port || 80,
    path: cameraUrl.path,
    headers: { 'Authorization': auth }
  };

  const cameraReq = http.request(options, (cameraRes) => {
    // 把摄像头返回的图片数据直接转发给前端
    res.writeHead(cameraRes.statusCode, cameraRes.headers);
    cameraRes.pipe(res);
  });

  cameraReq.on('error', (err) => {
    res.writeHead(500);
    res.end('Error fetching camera image: ' + err.message);
  });

  cameraReq.end();
});

server.listen(3000, () => {
  console.log('Proxy server running on http://localhost:3000');
});

3. 运行代理：在终端执行node proxy-server.js
4. 前端HTML里的img标签改成：

<img id="img1" border="0" src="http://localhost:3000">

这样就能正常加载图片了，完全避开了CORS和URL凭证的问题。

方案2：Chrome扩展绕过CORS限制 #

如果你不想搭代理，可以写一个极简的Chrome扩展，让它帮你在请求摄像头资源时自动添加认证头，同时绕过CORS限制。

1. 创建一个文件夹，比如camera-auth-fix
2. 里面创建manifest.json：

{
  "manifest_version": 3,
  "name": "Camera Auth Fix",
  "version": "1.0",
  "permissions": ["webRequest", "webRequestBlocking", "<all_urls>"],
  "background": {
    "service_worker": "background.js"
  }
}

3. 创建background.js：

chrome.webRequest.onBeforeSendHeaders.addListener(
  (details) => {
    // 匹配你的摄像头图片地址
    if (details.url.includes('192.168.178.41/tmpfs/auto.jpg')) {
      const auth = 'Basic ' + btoa('admin:admin');
      details.requestHeaders.push({ name: 'Authorization', value: auth });
    }
    return { requestHeaders: details.requestHeaders };
  },
  { urls: ['<all_urls>'] },
  ['blocking', 'requestHeaders', 'extraHeaders']
);

// 给返回头添加跨域允许标识
chrome.webRequest.onHeadersReceived.addListener(
  (details) => {
    if (details.url.includes('192.168.178.41/tmpfs/auto.jpg')) {
      details.responseHeaders.push({ name: 'Access-Control-Allow-Origin', value: '*' });
    }
    return { responseHeaders: details.responseHeaders };
  },
  { urls: ['<all_urls>'] },
  ['blocking', 'responseHeaders', 'extraHeaders']
);

4. 打开Chrome的扩展管理页面（chrome://extensions/），开启开发者模式，点击“加载已解压的扩展程序”，选择刚才的文件夹。
5. 现在你的本地HTML里直接用<img id="img1" border="0" src="http://192.168.178.41/tmpfs/auto.jpg">就能正常加载了。

方案3：使用iframe（仅部分场景可行） #

有些摄像头支持通过iframe的方式加载，并且可以通过JavaScript注入认证信息，但这个方法兼容性不一，仅供尝试：

<iframe id="cameraFrame" style="display:none"></iframe>
<script>
  const frame = document.getElementById('cameraFrame');
  frame.onload = () => {
    // 尝试获取iframe内的图片，不过很多摄像头会限制跨域访问iframe内容
    const img = frame.contentDocument?.querySelector('img');
    if (img) {
      document.getElementById('img1').src = img.src;
    }
  };
  // 注意：部分浏览器可能仍会拦截带凭证的URL，所以这个方法不一定生效
  frame.src = 'http://admin:admin@192.168.178.41/tmpfs/auto.jpg';
</script>
<img id="img1" border="0">

总结一下，方案1是最稳定通用的，不管什么浏览器都能工作；方案2适合不想折腾服务器的Chrome用户；方案3只能作为备选。

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