如何在JavaScript中实现类似Python requests的非本地网页HTML源码获取？

嘿，我来帮你解决这个在JavaScript里获取非同源网页HTML的问题！你提到用Python的requests能轻松做到，其实JS里也有对应的方案，不过得分Node.js环境和浏览器环境来聊，因为两者的限制不一样～

一、Node.js环境（无跨域限制，和Python requests逻辑类似） #

Node.js运行在服务器端，不受浏览器同源策略约束，直接就能像requests那样发起HTTP请求获取HTML。这里有两种常用方式：

1. 使用Node.js内置的http/https模块（无需额外安装依赖） #

const https = require('https');

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

https.get(targetUrl, (response) => {
  let htmlContent = '';

  // 接收数据片段
  response.on('data', (chunk) => {
    htmlContent += chunk;
  });

  // 数据接收完成
  response.on('end', () => {
    console.log(htmlContent); // 这里就是完整的HTML源码，可以直接解析
  });
}).on('error', (err) => {
  console.error('请求出错啦:', err.message);
});

2. 使用第三方库（更简洁，比如axios或node-fetch） #

先安装依赖：

npm install axios

然后写代码：

const axios = require('axios');

axios.get('https://example.com')
  .then((response) => {
    console.log(response.data); // 直接拿到HTML源码
  })
  .catch((error) => {
    console.error('请求失败:', error);
  });

二、浏览器环境（受同源策略限制，需要特殊处理） #

浏览器出于安全考虑，默认不允许前端JS直接请求非同源的网页（域名、协议、端口任意一个不同就算跨域）。这里有几个可行的解决思路：

1. 利用代理服务器（最通用的方案） #

自己搭一个简单的Node.js代理服务器，让它帮你请求目标网页，然后把HTML返回给前端。比如用Express框架：

首先安装依赖：

npm install express axios

代理服务器代码：

const express = require('express');
const axios = require('axios');
const app = express();

// 允许前端跨域访问代理接口
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

// 代理接口，接收目标URL参数
app.get('/proxy-html', async (req, res) => {
  try {
    const targetUrl = req.query.url;
    const response = await axios.get(targetUrl);
    res.send(response.data); // 返回HTML给前端
  } catch (err) {
    res.status(500).send('请求目标页面失败，请检查URL是否正确');
  }
});

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

然后前端浏览器代码调用代理：

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

fetch(`http://localhost:3000/proxy-html?url=${encodeURIComponent(targetUrl)}`)
  .then((response) => response.text())
  .then((html) => {
    console.log(html); // 拿到HTML源码，接下来就可以解析了
  })
  .catch((err) => {
    console.error('出错啦:', err);
  });

2. 目标服务器支持CORS（碰运气的方案） #

如果目标网页的服务器配置了CORS，允许你的前端域名跨域请求，那可以直接用fetch或axios请求：

fetch('https://example.com')
  .then((response) => response.text())
  .then((html) => {
    console.log(html);
  })
  .catch((err) => {
    console.error('要么跨域被拦截，要么请求失败:', err);
  });

不过这种情况比较少见，大部分网站不会随便开放CORS。

3. JSONP（局限性大，仅适用于支持JSONP的接口） #

如果目标网站提供了JSONP接口，也能间接获取数据，但只能处理GET请求，而且无法直接拿到完整HTML（通常是结构化数据），所以这个方案不太适合你的需求，这里就不展开了。

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