Fetch MCP网页内容抓取实操：抓取“刘强东送外卖”新闻案例详细教程！

推荐语

轻松掌握网页内容抓取技能，Fetch MCP工具实操教程不容错过！

核心内容：
1. Fetch MCP工具介绍及其应用场景
2. Fetch工作流程详解：创建请求、发送请求、处理响应
3. Fetch的优势分析：简单易用、基于Promise、浏览器兼容性好、灵活性强

杨芳贤

53A创始人/腾讯云(TVP)最具价值专家

在平时工作中我们经常会遇到要从互联网获取相关信息内容需求，但是往往只有需求却缺乏一个好的工具，来解决网页内容抓取这个让人麻爪的问题。

今天我们就给大家推荐一款简单好用的网页内容抓取工具Fetch MCP！

我们先了解下Fetch，Fetch是一个简单易用且强大的功能网页内容抓取工具，被我们广泛的用在开发、数据分析以及自动化测试等领域。

Fetch是基于Promise的API，它的工作流程主要包括以下几个步骤：

首先是创建请求，通过调用 fetch() 函数+传入目标URL地址，向服务器发送一个请求。这个请求可以包含各种可选参数，如请求方法（GET、POST 等）、请求头、请求体等。

第二步骤发送请求，Fetch会将请求发送到指定的服务器，并等待服务器的响应，在等待过程中，会自动处理网络连接、DNS 解析以及TCP连接等底层细节，不需要我们用户手动干预。

最后是处理响应，当服务器返回响应后，Fetch 会将响应封装成一个 Response对象，这个对象包含了响应的HTTP状态码、响应头以及响应体等信息。

通过检查响应状态码（比如“200”表示成功），可以确定请求是否成功，对于成功的请求，可以进一步从响应体中提取所需的数据，常见的数据类型包括 JSON、文本（text）以及二进制数据（如 Blob 或 ArrayBuffer）等。

Fetch 的优点

简单易用 ：Fetch的语法非常简洁明了，与传统的XMLHttpRequest相比，Fetch避免了繁琐的事件监听和回调函数的嵌套，这就让代码更加清晰和易于维护。比如，使用Fetch 发送一个GET请求并获取 JSON 数据的代码可以简化为：

fetch(url).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

基于Promise ：由于Fetch 基于Promise实现，因此可以很方便地与其他基于Promise 的异步进行操作组合和链式调用。这就让我们开发人员能够更加灵活地处理复杂的异步逻辑，避免了回调地狱的问题，并且可以轻松地应用Promise的各种方法，比如 then()、catch()、finally() 等，来控制程序的执行流程和错误处理。

浏览器兼容性好 ：Fetch几乎支持我们平时用到的所有主流浏览器，包括 Chrome、Firefox、Safari、Edge 等等，这项优点的应用场景在于，在不同浏览器环境下，可以使用相同的Fetch API进行网页内容抓取，减少了因浏览器差异带来的兼容性问题。

灵活性强 ：Fetch 提供了丰富的可选参数，支持开发人员自定义请求的各种属性。例如，可以指定请求方法（如 POST、PUT、DELETE 等）、设置请求头（如 Content-Type、Authorization 等）、添加请求体（用于发送数据到服务器）、配置超时时间等。

什么是Fetch MCP？Fetch MCP 是基于 Model Context Protocol (MCP) 的一种轻量级网页爬虫服务器。

Fetch MCP在Fetch的基础上进行了功能拓展和优化，为大语言模型提供了更高效、更智能的网页内容抓取服务，下面我们来看下Fetch MCP的详细功能：

内容抓取与转换 ：能够从互联网获取指定URL的内容，并将其转换为Markdown格式，还可选择以 HTML、JSON 或纯文本格式返回结果。

参数灵活可调 ：

• url（字符串，必需）：指定要抓取的网页地址。


• max_length（整数，可选，默认 5000）：设置返回内容的最大字符数，可避免获取过多无用信息，提高效率

  
  

• start_index（整数，可选，默认 0）：从指定字符索引位置开始提取内容，方便分块获取网页内容，便于模型按需读取。


• raw（布尔值，可选，默认 false）：若设为 true，则获取原始内容而不进行 Markdown 转换。

极简架构 ：安装部署简单，通过单命令即可启动服务，不需要复杂依赖环境，如使用 UV 运行时，直接运行 uvx mcp-server-fetch 就可以。

智能转换引擎 ：内置 HTML-to-Markdown 解析算法，可以准确提取正文内容，并且过滤广告等噪声数据，输出较为纯净、结构化的 Markdown 格式内容，方便我们后续处理和分析。

原生适配LLM 生态：输出格式天然适配ChatGPT、Claude 等大模型，可以直接将抓取的网页内容作为大模型的输入。

内容聚合：可批量抓取新闻站点、博客等的头条内容，设置合适的max_length和start_index参数，就可以为构建行业资讯监控系统提供数据支持。

竞品分析 ：实时监控电商平台商品价格变动，结合定时任务和start_index参数定位价格信息，还可通过raw模式获取原始HTML，再利用XPath解析等技术，实现对竞品信息的精准抓取和分析。

智能助手开发：作为知识库构建的数据管道，抓取技术文档网站内容，转换为Markdown 后存入向量数据库，供LLM检索和增强生成效果，提升智能助手的知识储备和回答质量。

安装开始

Step1：使用 uv（推荐），当使用 uv 时不需要复杂的安装步骤，使用 uvx 直接运行 mcp-server-fetch即可。

使用 PIP，或者，您可以通过 pip 安装 mcp-server-fetch：

pip install mcp-server-fetch

安装后，您可以使用以下命令以脚本方式运行它：

python -m mcp_server_fetch

Step2：MCP客户端这里我们以Claude 配置为例进行讲解，首先官方下载Claude客户端，最好是最新版。

安装好Claude客户端后，进入功能页面，点击左上角“文件”->"首选项"->“Cursor Settings”进入到MCP配置页面。

进入到MCP菜单页面后，点击右侧蓝色按钮“Add new global MCP server”进行mcp.json文件配置。

在您的mcp.json设置中添加如下内容：

"mcpServers": {  "fetch": {    "command": "uvx",    "args": ["mcp-server-fetch"]  }}

添加完成后效果如下图：

以上我们就完成了Fectch MCP配置工作！

使用方法：

下面我们以抓取今天的一个热点新闻“刘强东身穿京东外卖骑手工服送外卖”为案例，看下Fectch MCP到底如何抓取这个新闻，并生成一个静态HTML新闻页面。

方法很简单，我们只需要把准备好的文案（包含新闻链接）直接在Cursor会话窗口输入就OK！

文案内容如下：

@https://baijiahao.baidu.com/s?id=1830064276188136180&wfr=spider&for=pc ,根据链接抓取刘强东送外卖新闻内容，包括图片，生成一个静态html新闻页面！

我们可以看到文案发出后，Claude已经开始调用fetch工具进行网页内容抓取.

百度的链接访问限制，fetch在这里自动换了个链接，抓取相关的新闻，如下图所示。

html新闻静态页面默认生成到了桌面，如下图：

我们打开看下效果：漂不漂亮！（除了图片没有抓取到）

没抓到的图片在这里，手工补上哈哈：

如下图是Claude客户端的整个调用过程：