Nuxt项目部署Netlify因legacy图片URL触发混合内容错误如何解决

Netlify不支持关闭全站HTTPS强制，也不建议这么做，以下是可行的规避方案：

方案1：使用Netlify重写规则代理HTTP资源（推荐） #

这是成本最低的实现方式，原理是将所有对图片资源的请求先发送到你的Netlify站点域名下，由Netlify后端代理请求第三方HTTP资源，再通过HTTPS返回给前端，完全避免混合内容问题。

操作步骤 #

1. 在项目静态资源根目录（如Vue/React项目的public目录，打包后会输出到构建产物根目录）新建名为_redirects的文件，写入以下规则：

/images-proxy/*  http://[替换为你的图片供应商实际域名]/:splat  200

2. 调整前端图片引用逻辑，将原HTTP前缀的图片地址替换为你的站点代理路径：

<!-- 原写法 -->
<!-- <img :src="cardData.image"/> -->
<!-- 新写法，将原HTTP域名部分替换为代理路径 -->
<img :src="cardData.image.replace('http://[替换为你的图片供应商实际域名]/', '/images-proxy/')"/>

补充说明 #

你之前使用的upgrade-insecure-requests规则无效是合理的：该规则会自动将所有HTTP请求升级为HTTPS发送，但你的图片供应商不支持HTTPS访问，自然无法加载资源。

可选方案：Netlify Functions实现自定义代理 #

如果需要对图片请求做额外处理（如添加鉴权、自定义缓存规则、适配多供应商域名），可以写一个简单的Netlify Function做请求转发，逻辑和重写规则一致，灵活性更高。

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