如何使用JS在前端获取网页的标题与预览图片，无需数据库存储

纯前端普通网页场景下无法直接跨域抓取第三方URL的元数据，核心限制是浏览器同源策略，绝大多数网站不会开放跨域访问权限，直接用fetch请求目标页面会被CORS规则拦截。但可以通过以下方案实现完全不依赖自有数据库、仅前端调用的需求：

实现方案 #

方案1：调用跨域公共元数据解析服务 #

你可以使用支持跨域调用的公开OG标签解析服务，这类服务会在服务端完成目标页面的抓取解析，再将元数据返回给前端，你无需搭建后端，也不用存储任何数据，每次需要展示时实时调用即可。
调用示例代码：

async function getUrlPreviewMeta(targetUrl) {
  // 替换为你选择的公共元数据解析接口地址
  const parseApi = `[公共解析服务接口地址]?url=${encodeURIComponent(targetUrl)}`;
  try {
    const response = await fetch(parseApi);
    const metaData = await response.json();
    return {
      // 优先取og标题，兜底取页面原生title
      title: metaData.og_title || metaData.title || "无标题",
      // 优先取og预览图，兜底取站点favicon
      previewImage: metaData.og_image || metaData.favicon || "[你的默认占位图地址]"
    }
  } catch (err) {
    return {
      title: "获取失败",
      previewImage: "[你的默认占位图地址]"
    }
  }
}

返回的元数据一般会覆盖绝大多数站点的预览信息，最终效果参考：

方案2：浏览器扩展场景下直接抓取 #

如果你的项目是浏览器扩展，可以直接在扩展配置中声明跨域请求权限，无需依赖第三方服务，自行抓取页面解析元数据即可：

async function parseMetaBySelf(targetUrl) {
  const pageRes = await fetch(targetUrl);
  const pageHtml = await pageRes.text();
  const doc = new DOMParser().parseFromString(pageHtml, "text/html");
  return {
    title: doc.querySelector('meta[property="og:title"]')?.content || doc.querySelector("title")?.textContent || "无标题",
    previewImage: doc.querySelector('meta[property="og:image"]')?.content || doc.querySelector('link[rel="apple-touch-icon"]')?.href || doc.querySelector('link[rel="icon"]')?.href || "[默认占位图地址]"
  }
}

两种方案都完全不需要你将元数据存储到自有数据库，每次展示时实时拉取即可。

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