客户端用axios调用本地接口报Network Error，浏览器可正常访问求助

我正在尝试将客户端与服务器建立连接，当使用axios.get(http://localhost:3000/api/v1/products)发起请求时，出现了"Network Error"错误。但在浏览器中访问该端点时，能看到返回的方括号（空数组），服务器终端显示GET /api/v1/products 304。我是编程新手，希望有人能帮忙解释原因，谢谢！

客户端代码：

useEffect(() => {
  const fetchPosts = async () => {
    try {
      const response = await axios.get(
        'http://localhost:3000/api/v1/products',
      );
      console.log('response: ', response);
    } catch (error) {
      console.log(`Client Error: ${error.message}`);
    }
  };
  fetchPosts();
}, []);

服务器代码：

const express = require("express");
const bodyParser = require("body-parser");
const morgan = require("morgan");
const mongoose = require("mongoose");
var cors = require("cors");

require("dotenv/config");
const app = express();
app.use(cors());
app.options('*', cors());
app.use(bodyParser.json());
app.use(morgan("tiny"));

const productSchema = mongoose.Schema({
  name: String,
  image: String,
  countInStock: Number,
});

const Product = mongoose.model("Product", productSchema);

const api = process.env.API_URL;

app.get(`${api}/products`, async (req, res) => {
  const products = await Product.find();
  if (!products) return res.status(500).json({ success: false });
  res.send(products);
});

app.post(`${api}/products`, (req, res) => {
  const product = new Product({
    id: req.body.id,
    name: req.body.name,
    image: req.body.image,
  });
  product
    .save()
    .then((createdProduct) => {
      res.status(201).json(createdProduct);
    })
    .catch((error) => {
      res.status(500).json({
        error: error,
        successful: false,
      });
    });
});


mongoose
  .connect(process.env.CONNECTION_STRING, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    dbName: "Firebase101",
  })
  .then(() => {
    console.log("Database connection is ready!");
  })
  .catch((error) => {
    console.log(error);
  });

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

1. 确认API路由匹配 #

服务器通过${api}/products定义路由，api来自.env文件的API_URL配置。你请求的路径是/api/v1/products，所以必须保证.env里的API_URL值为/api/v1。可以在服务器代码中添加console.log('当前API前缀:', api)，启动服务器后查看日志确认。

2. 排查跨域问题 #

浏览器直接访问服务器端点属于同源请求，但如果你的客户端在其他端口（比如React默认的3001）运行，axios请求就会触发跨域限制：

• 检查浏览器开发者工具的Network面板，查看请求的Response Headers中是否存在Access-Control-Allow-Origin字段，若无则说明CORS中间件未生效；
• 推荐用代理解决跨域：在客户端项目的package.json中添加"proxy": "http://localhost:3000"，然后将axios请求改为相对路径：await axios.get('/api/v1/products')，开发服务器会自动代理请求到后端。

3. 查看完整错误详情 #

当前仅打印error.message无法定位具体问题，修改catch块代码打印完整错误信息：

catch (error) {
  console.log('客户端错误详情:', error);
}

通过完整错误信息可以快速判断是CORS错误、路径错误还是服务器响应超时等问题。

4. 关于304状态码 #

服务器返回304是协商缓存机制，说明浏览器之前请求过该端点，此次返回缓存的空数组，这属于正常现象，和你遇到的Network Error无关。

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