如何在浏览器中运行Node.js文件及解决404报错问题

你遇到的404是因为HTML里的JS文件路径写错了，但核心问题是混淆了Node.js后端代码和浏览器端JS的运行逻辑——你直接把依赖Node环境的后端代码当成浏览器可执行的JS来引用，这是新手最容易踩的坑。先给你讲清楚两者的核心差异，再给你完整的实现步骤。

Node.js vs 浏览器端JS的核心差异 #

• 运行环境完全独立：浏览器JS在用户的浏览器里执行，Node.js在你的电脑/服务器的Node环境里执行，两者没有直接关联。
• 可用API不同：
  • 浏览器端能操作DOM（比如document.getElementById）、调用浏览器内置的fetch，但不能读写本地文件、直接访问系统资源；
  • Node.js有fs（文件系统）、http（搭建服务器）等专属API，但没有DOM对象，也不能处理浏览器的页面交互。
• 模块系统不兼容：Node.js用require/import加载第三方包（比如cheerio、node-fetch），这些包是专门为Node环境开发的，浏览器无法识别；浏览器原来只能通过script标签加载JS，现在支持ES模块，但也没法直接使用Node的第三方依赖。
• 权限限制不同：浏览器受同源策略限制，不能随意跨域请求；Node.js没有这个限制，能直接抓取任意网页。

实现前端调用后端抓取功能的完整步骤 #

第一步：调整文件结构 #

把前端和后端代码彻底分开，避免混淆：

Desktop/
├── node_modules/
├── public/          # 存放前端文件
│   ├── index.html
│   └── frontend.js  # 处理前端交互的JS（和后端JS完全分开）
├── server.js        # 后端Node.js服务器代码
├── package.json
└── package-lock.json

第二步：搭建Node.js后端服务器 #

首先安装Express（轻量的Node.js服务器框架）：

npm install express

然后编写server.js，实现抓取接口：

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

const app = express();
const port = 3000;

// 允许解析JSON格式的请求体
app.use(express.json());
// 把public文件夹设为静态资源目录，前端可直接访问其中的文件
app.use(express.static('public'));

// 处理前端的抓取请求
app.post('/scrape', async (req, res) => {
  try {
    const { url } = req.body;
    if (!url) {
      return res.status(400).send('请输入要抓取的网页URL');
    }

    // 用node-fetch获取网页内容
    const response = await fetch(url);
    const html = await response.text();
    const $ = cheerio.load(html);

    // 这里写你的抓取逻辑（示例：提取标题和所有h1标签）
    const title = $('title').text();
    const headings = [];
    $('h1').each((i, el) => {
      headings.push($(el).text());
    });

    // 返回抓取结果给前端
    res.json({
      success: true,
      title,
      headings
    });
  } catch (error) {
    res.status(500).json({
      success: false,
      message: '抓取失败：' + error.message
    });
  }
});

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

第三步：编写前端交互代码 #

public/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>食谱抓取工具</title>
</head>
<body>
  <div>
    <input type="text" id="urlInput" placeholder="输入要抓取的网页URL">
    <button id="scrapeBtn">开始抓取</button>
  </div>
  <div id="result"></div>

  <!-- 引用前端专属的JS文件 -->
  <script src="./frontend.js"></script>
</body>
</html>

public/frontend.js

const scrapeBtn = document.getElementById('scrapeBtn');
const urlInput = document.getElementById('urlInput');
const resultDiv = document.getElementById('result');

scrapeBtn.addEventListener('click', async () => {
  const url = urlInput.value.trim();
  if (!url) {
    alert('请输入有效的URL');
    return;
  }

  try {
    // 通过fetch发送请求到后端接口
    const response = await fetch('/scrape', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ url })
    });

    const data = await response.json();
    if (data.success) {
      // 在页面展示抓取结果
      resultDiv.innerHTML = `
        <h3>抓取结果</h3>
        <p>页面标题：${data.title}</p>
        <h4>一级标题列表：</h4>
        <ul>
          ${data.headings.map(heading => `<li>${heading}</li>`).join('')}
        </ul>
      `;
    } else {
      resultDiv.innerHTML = `<p style="color: red;">${data.message}</p>`;
    }
  } catch (error) {
    resultDiv.innerHTML = `<p style="color: red;">请求失败：${error.message}</p>`;
  }
});

第四步：运行项目 #

1. 打开终端，进入Desktop文件夹：

   # Mac/Linux
   cd ~/Desktop
   # Windows
   cd C:\Users\你的用户名\Desktop
   

2. 启动后端服务器：

   node server.js
   

3. 打开浏览器访问http://localhost:3000，输入目标URL点击按钮，就能看到抓取结果了。

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