如何用JavaScript获取URL的HTML页面？解决Fetch失败报错

你遇到的TypeError: Failed to fetch核心原因是浏览器的同源策略限制：前端JavaScript脚本只能请求与当前页面域名、协议、端口完全一致的资源，直接请求https://nmjava.com属于跨域操作，除非目标服务器配置了CORS（跨域资源共享）允许你的域名访问，否则浏览器会拦截请求。

以下是可行的解决方案：

1. 使用后端代理（最可靠的方案） #

后端服务器不受浏览器同源策略约束，可以通过后端中转请求目标网站的HTML，再返回给前端。这里以Node.js + Express为例：

步骤1：编写后端代理服务（server.js） #

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

// 代理接口，负责请求目标网站HTML
app.get('/proxy-html', async (req, res) => {
  try {
    const targetUrl = 'https://nmjava.com';
    const response = await fetch(targetUrl);
    
    if (!response.ok) {
      throw new Error(`请求目标网站失败，状态码：${response.status}`);
    }
    
    const htmlContent = await response.text();
    res.send(htmlContent);
  } catch (err) {
    res.status(500).send(`代理请求出错：${err.message}`);
  }
});

// 托管前端静态文件（把你的HTML文件放在public目录下）
app.use(express.static('public'));

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

步骤2：修改前端代码 #

将原来直接请求目标网站的代码，改为请求自己的代理接口：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fetch HTML Example</title>
</head>
<body>
  <div id="content"></div>

  <script>
    async function fetchHTML() {
      try {
        // 请求本地代理接口
        const response = await fetch('/proxy-html');
        if (!response.ok) {
          throw new Error(`请求代理失败：${response.statusText}`);
        }
        const html = await response.text();
        document.getElementById('content').innerHTML = html;
      } catch (error) {
        alert('获取HTML失败：' + error.message);
      }
    }

    fetchHTML();
  </script>
</body>
</html>

步骤3：运行服务 #

1. 创建public文件夹，把修改后的前端HTML文件放入其中
2. 安装依赖：npm install express node-fetch
3. 启动服务：node server.js
4. 访问http://localhost:3000即可获取目标网站的HTML

2. 检查目标网站的CORS配置 #

如果目标网站是你自己维护的，可以在服务器上配置CORS响应头，允许你的前端域名访问。例如在Nginx中添加：

add_header Access-Control-Allow-Origin "你的前端域名";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";

如果目标网站不是你维护的，可通过curl命令查看它是否开放CORS：

curl -I https://nmjava.com

若响应头中没有Access-Control-Allow-Origin字段，说明对方未开放跨域，只能使用代理方案。

3. 排查其他可能的问题 #

• HTTPS证书问题：如果目标网站的SSL证书不被浏览器信任，也会导致请求失败。可在浏览器控制台（F12 → Console）查看具体的证书错误信息。
• 网络限制：本地防火墙、代理服务器可能拦截了请求，可尝试切换网络环境测试。

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