前端项目部署在https服务上，项目中通过img标签访问http服务的图片（或访问其他http资源）时报错

问题

前端项目部署在https服务上，项目中通过img标签访问http服务的图片报错：

Mixed Content: The page at ‘https://x.x.x.x/xxx’ was loaded over https,but requested an insecure image ‘http://x.x.x.x/xxx/img.png’.This content should also be served over https.

原因

当你的前端项目部署在HTTPS服务上时，浏览器默认会阻止从非加密的HTTP服务加载资源，这是出于安全考虑。这种情况被称为“混合内容”（Mixed Content），即在一个通过HTTPS提供的页面上加载通过HTTP提供的资源。浏览器会阻止这种行为，因为它降低了用户的安全性，可能使用户容易受到中间人攻击。

解决方案

• 将所有资源升级到HTTPS：最佳解决方案是确保你的所有资源（包括图片、脚本、样式表等）都通过HTTPS提供。如果图片存储在你可以控制的服务器上，设置SSL证书并通过HTTPS提供图片。如果图片存储在第三方服务上，查看是否有HTTPS版本的URL可用。

• 使用Content Security Policy (CSP)设置允许加载HTTP资源（不推荐）：虽然这种方法可以解决问题，但它降低了页面的安全性，因此不推荐使用。如果你决定使用这种方法，请确保你了解可能带来的安全风险。你可以通过在你的服务器响应头中添加一个Content-Security-Policy头来实现，例如࿱