如何实现跨主机读取图片文件夹索引页并直接展示列表内图片？

该功能在跨主机场景下可实现，核心需要解决浏览器同源策略的跨域访问限制问题，以下是具体实现思路和学习方向：

实现思路 #

1. 纯前端实现（适用场景有限） #

• 仅可用于目标文件服务器主动开启了CORS跨域许可的场景，绝大多数公开的Index Of索引页默认不支持该条件
• 核心逻辑：
  • 用fetch API请求用户输入的索引页URL，获取HTML文本内容
  • 通过正则匹配或DOMParser解析HTML，提取所有后缀为.jpg/.png/.webp等格式的图片资源的绝对路径
  • 批量创建<img>标签插入页面完成预览渲染

2. 后端代理实现（全场景通用，推荐） #

• 不受目标站点CORS配置限制，适用于所有公开可访问的Index Of页面
• 核心逻辑：
  • 前端将用户输入的索引页URL提交到自有后端服务
  • 由后端发起HTTP请求获取目标索引页的HTML内容，不受浏览器同源策略约束
  • 后端可直接解析提取图片路径返回给前端，也可以把完整HTML返回给前端自行解析
  • 前端拿到图片路径后批量生成预览标签即可；如果目标站点有图片防盗链限制，可让后端同时代理图片资源请求，绕过防盗链规则

3. 浏览器扩展实现（适合个人自用场景） #

• 不需要搭建后端服务，仅个人使用可以选择该方案
• 核心逻辑：将功能开发为浏览器扩展，在扩展配置中申请跨域请求权限，即可直接在扩展页面内发起跨域请求，完成索引页解析和图片渲染

学习方向 #

• 前端部分：掌握fetch API、DOMParser解析、正则匹配、DOM动态操作相关知识
• 后端部分：任意后端语言的基础HTTP请求、路由处理能力即可实现，比如Node.js的axios库、Python的requests库都可以快速完成开发
• 基础概念：需要提前理解浏览器同源策略、CORS规则、防盗链原理，可大幅降低开发过程中的排查成本

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