使用Axios从本地Node.js服务器获取数据时出现ERR_NETWORK错误

问题概述 #

搭建了基于Express的Node.js服务器，通过Axios抓取und.com数据并使用Cheerio解析，期望将解析结果返回给React应用。但React端使用Axios请求本地服务器时，出现Axios ERR_NETWORK错误。

错误原因分析及修复步骤 #

服务器端问题修复 #

1. 跨域资源共享（CORS）缺失
   React应用默认运行在3000端口，Express服务器在3002端口，属于跨域请求，必须配置CORS中间件允许跨域访问。

安装cors依赖：

npm install cors

在服务器代码中引入并启用：

const cors = require('cors');
app.use(cors());

2. 路由与请求方法不匹配
   服务器根路径/是GET接口，但React端用POST请求访问该路径；同时服务器的POST路由/post仅做重定向，未返回有效数据。需调整路由逻辑，要么让React用GET请求访问/，要么修改POST路由直接返回解析结果。

3. 响应内容类型错误
   返回的result是数组，应设置响应头为application/json而非text/html，否则客户端无法正确解析数据。

客户端问题修复 #

1. 请求方法与URL调整
   将请求方法改为GET对应服务器/接口；若坚持用POST，需调整服务器POST路由返回数据，同时客户端请求/post路径。

2. React组件请求逻辑优化
   原组件直接返回axios请求会导致无限循环，需用useEffect钩子在组件挂载时发起单次请求。

修改后的完整代码 #

服务器代码 #

const express = require("express");
const cheerio = require("cheerio");
const axios = require("axios");
const cors = require('cors');

const app = express();
// 配置CORS允许跨域
app.use(cors());

const PORT = process.env.PORT || 3002;
const website = "https://und.com";

let options = {
  headers: {
    "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36"
  }
};

// GET接口返回解析结果
app.get("/", (req, res) => {
  axios(website, options)
    .then(({data}) => {
      const $ = cheerio.load(data);
      const result = $(".post__meta h3 a:last-child")
        .map((_, e) => $(e).text().trim())
        .get();
      console.log(result);
      // 设置正确的响应类型
      res.set("Content-Type", "application/json");
      res.json(result);
    })
    .catch((error) => {
      console.log("An error occurred:", error);
      res.status(500).json({error: "An error occurred while making the HTTP request."});
    });
});

// 可选：保留POST路由并返回数据
app.post("/post", (req, res) => {
  console.log("Connected to react");
  axios(website, options)
    .then(({data}) => {
      const $ = cheerio.load(data);
      const result = $(".post__meta h3 a:last-child")
        .map((_, e) => $(e).text().trim())
        .get();
      res.json(result);
    })
    .catch((error) => {
      console.log("An error occurred:", error);
      res.status(500).json({error: "An error occurred while making the HTTP request."});
    });
});

app.listen(PORT, () => {
  console.log(`server is running on PORT: ${PORT} `);
});

React代码 #

import axios from "axios";
import { useEffect } from "react";

const url = "http://localhost:3002";

const Home = () => {
  useEffect(() => {
    // 使用GET请求访问服务器根路径
    axios.get(url)
      .then((response) => {
        console.log("GET response: ", response.data);
      })
      .catch((err) => {
        console.log("GET error: ", err);
      });

    // 或者使用POST请求访问/post路径
    // axios.post(`${url}/post`)
    //   .then((response) => {
    //     console.log("POST response: ", response.data);
    //   })
    //   .catch((err) => {
    //     console.log("POST error: ", err);
    //   });
  }, []);

  return <div>数据加载中...</div>;
};

export default Home;

验证步骤 #

1. 重启Express服务器，确保cors依赖已正确安装
2. 启动React应用，查看控制台是否成功获取解析结果
3. 检查浏览器网络请求，确认响应状态码为200且数据正确返回

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