Nodejs在Chrome控制台中遇到net::ERR_CONNECTION

h691938207 1楼

当在使用 Node.js 和 Chrome 控制台时遇到 net::ERR_CONNECTION_REFUSED 错误，通常表示客户端（浏览器）无法连接到服务器。这可能是由于多种原因造成的，例如服务器未运行、端口被占用或网络配置问题。

以下是一些常见的排查步骤和解决方案：

检查服务器是否正在运行: 确保你的 Node.js 应用程序已经启动并监听正确的端口。你可以通过在命令行中运行 node your-app.js 来启动应用，并确保没有报错信息。
检查端口号是否正确: 确认你的前端代码中请求的 URL 端口号与后端服务实际监听的端口号一致。例如，如果后端服务在端口 3000 上运行，则前端代码应指向 http://localhost:3000 或相应的 IP 地址和端口。
防火墙和代理设置: 检查是否有任何防火墙或代理阻止了请求。确保所有必要的端口都是开放的。
调试和日志记录: 在 Node.js 应用程序中添加一些日志输出来确认请求到达服务器的时间点以及服务器的响应情况。

示例代码

Node.js 后端 (server.js)

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

app.use(express.static('public')); // 用于提供静态文件

// 处理 POST 请求
app.post('/upload', (req, res) => {
    console.log("Upload request received");
    // 处理文件上传逻辑
    res.send("File uploaded successfully!");
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

前端 JavaScript (client.js)

document.getElementById('uploadForm').addEventListener('submit', function(event) {
    event.preventDefault();

    const formData = new FormData(this);

    fetch('http://localhost:3000/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Error:', error);
    });
});

在这个例子中，我们创建了一个简单的 Express 应用来处理上传请求，并且在前端使用 fetch 发送 POST 请求。确保服务器端口和客户端请求地址一致，这样才能避免 net::ERR_CONNECTION_REFUSED 错误。

希望这些信息能帮助你解决问题！

yibo5220 2楼

请求被拒绝, 感觉是 url 错了访问到没有服务器的地方去了… 检查下 url 是否正确还有服务器是否接收到请求吧

sinazl 3楼

服务器上的图片都有，url是：http://127.0.0.1:8888 也没错

songsunli 4楼

当您在使用 Node.js 进行开发时，如果在 Chrome 控制台中遇到 net::ERR_CONNECTION_REFUSED 错误，通常表示您的前端应用尝试与某个后端服务建立连接，但该服务拒绝了连接或没有正确运行。这可能是由于多种原因造成的，例如后端服务未启动、端口被占用或配置错误等。

为了帮助您解决问题，我将提供一个简单的 Node.js 服务器示例，确保您的服务正在运行，并且可以接收来自前端的请求。此外，我会给出一个前端 AJAX 请求的例子，用于上传文件到后端。

后端 Node.js 服务器代码

首先，创建一个简单的 Node.js 服务器，监听一个端口（例如 3000），并处理文件上传请求：

const express = require('express');
const multer = require('multer');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('No file uploaded.');
  }
  res.send('File uploaded successfully!');
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

确保安装了必要的依赖：

npm install express multer

前端 JavaScript 代码

在您的前端代码中，确保 URL 指向正确的地址。以下是一个使用 XMLHttpRequest 的示例：

function uploadFile(fileInput) {
  const xhr = new XMLHttpRequest();
  const url = 'http://localhost:3000/upload';
  
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'multipart/form-data');
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('Error:', xhr.statusText);
    }
  };

  xhr.onerror = function() {
    console.error('There was a network error!');
  };

  const formData = new FormData();
  formData.append('file', fileInput.files[0]);

  xhr.send(formData);
}

// 使用方式:
// <input type="file" id="fileInput">
// document.getElementById('fileInput').addEventListener('change', function(e) { uploadFile(this); });

解决问题的步骤

确保您的 Node.js 服务器正在运行。
检查 URL 是否正确，包括端口号。
如果仍然无法连接，检查是否有防火墙或其他网络设置阻止连接。