如何使用JavaScript拉取外部网站HTML并将其转为字符串？

Hey there! Let's break this down for you clearly. First, I need to start with a key constraint you’ll hit right away: browser same-origin policy. Browsers block frontend JavaScript from making requests to external domains unless that domain explicitly allows it via CORS (Cross-Origin Resource Sharing) headers. That’s why a straightforward frontend-only solution isn’t always possible—but there are workarounds.

情况1：目标网站允许跨域请求 #

If the external site has configured CORS to allow requests from your domain, you can use native browser APIs like fetch() directly to grab the full HTML. Here’s a simple example:

// 替换成你要获取的目标网站URL
const targetUrl = "https://example.com";

fetch(targetUrl)
  .then(response => {
    // 先确认请求成功
    if (!response.ok) {
      throw new Error(`请求失败！状态码：${response.status}`);
    }
    // 将响应转为纯文本（HTML本身就是文本格式）
    return response.text();
  })
  .then(fullHtml => {
    // 现在fullHtml变量就存储了目标页面的全部HTML内容
    console.log("获取到的HTML：", fullHtml);
    // 你可以在这里对HTML做任何后续处理，比如解析DOM片段
  })
  .catch(error => {
    console.error("出错了：", error);
  });

情况2：目标网站不允许跨域（绝大多数场景） #

Most external sites won’t allow cross-origin requests from random frontend domains. In this case, you’ll need a backend proxy—a server-side script that makes the request to the external site on your frontend’s behalf, then sends the HTML back to your JavaScript.

Here’s a quick, practical example using Node.js + Express (a popular lightweight backend framework):

1. 后端代理代码（Node.js） #

const express = require('express');
const fetch = require('node-fetch');
const app = express();

// 允许你的前端域名跨域请求这个代理接口
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://your-own-website.com'); // 替换成你的前端域名
  next();
});

// 定义代理接口，接收目标URL参数并返回HTML
app.get('/fetch-external-html', async (req, res) => {
  const targetUrl = req.query.url;
  if (!targetUrl) {
    return res.status(400).send('请传入目标网站URL参数');
  }

  try {
    const response = await fetch(targetUrl, {
      // 模拟浏览器请求头，避免被目标网站识别为爬虫
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
      }
    });
    const fullHtml = await response.text();
    res.send(fullHtml);
  } catch (error) {
    res.status(500).send(`请求外部网站失败：${error.message}`);
  }
});

app.listen(3000, () => {
  console.log('代理服务器运行在 http://localhost:3000');
});

2. 前端调用代理接口的代码 #

const targetUrl = "https://example.com";
// 替换成你的代理服务器地址
const proxyUrl = `http://your-proxy-server.com/fetch-external-html?url=${encodeURIComponent(targetUrl)}`;

fetch(proxyUrl)
  .then(response => response.text())
  .then(fullHtml => {
    // fullHtml就是目标页面的全部HTML内容
    console.log(fullHtml);
  })
  .catch(error => {
    console.error('获取失败：', error);
  });

关键注意事项 #

• 遵守网站规则: 很多网站禁止未经授权的爬虫，一定要先查看目标网站的robots.txt文件（比如https://example.com/robots.txt），确保你的行为符合规定，避免被封禁IP。
• 反爬机制: 部分网站会检测请求频率、请求头等信息，你可能需要调整User-Agent、添加请求延迟，甚至处理验证码（这会大幅增加复杂度）。
• HTML解析: 如果后续需要操作HTML内容，你可以把字符串转为DOM对象，比如用document.createElement('div')后设置innerHTML，再进行DOM操作。

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