Next.js本地前端调用Heroku后端出现网络错误问题求助

核心问题排查 #

1. useEffect触发循环请求
   你的useEffect依赖数组包含blogs，每次调用setBlogs更新状态后，会再次触发useEffect执行数据请求，导致重复发起网络请求，这是引发网络错误的主要原因之一。

2. 未处理请求错误
   代码中没有对fetch请求的错误情况进行捕获处理，当请求失败（比如跨域问题、后端服务暂时不可用）时，会抛出未捕获的Promise错误，也就是你看到的「NetworkError when attempting to fetch resource」。

3. 异步写法不规范
   同时混用了async/await和.then()，这种写法容易导致逻辑混乱，也不利于错误捕获。

4. 潜在跨域问题
   前端本地运行、后端部署在Heroku，可能存在跨域资源共享（CORS）限制，需要后端配置允许前端域名的跨域请求。

代码修复方案 #

1. 修正useEffect依赖数组

将依赖数组改为空数组，确保组件挂载时只请求一次数据：

2. 添加错误捕获逻辑

用try/catch（配合async/await）处理请求错误，避免未捕获的Promise异常。

3. 规范异步写法

统一使用async/await，让代码逻辑更清晰易读。

修改后的完整代码：

import { ListProps } from "./List.props";
import styles from "./List.module.css";
import { P } from '../'
import React, { useEffect, useState } from "react";

export const List = ({ children, className, ...props }: ListProps): JSX.Element => {
    const [blogs, setBlogs] = useState<any[]>([]);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(`https://node-test-mongo.herokuapp.com/api/blog`);
                // 检查请求是否成功
                if (!response.ok) {
                    throw new Error(`请求失败: ${response.status}`);
                }
                const data = await response.json();
                setBlogs(data.blogs);
            } catch (error) {
                console.error('数据获取失败:', error);
                // 可在此添加用户可见的错误提示逻辑
            }
        };

        fetchData();
    }, []); // 空依赖数组，仅组件挂载时执行一次

    return (
        <div className={styles.ul} {...props}>
            {blogs.map((blog) => (
                <ul key={blog._id}>
                    <li className={styles.li}>
                        <P className={styles.title} size='l'>{blog.title}</P>
                        <P size='l'>description={blog.text}</P>
                    </li>
                </ul>
            ))}
        </div>
    )
};

额外检查项 #

• 后端CORS配置：确保你的Node.js后端已经配置了CORS中间件（比如cors包），允许前端本地地址（比如http://localhost:3000）的跨域请求。示例配置：

  const cors = require('cors');
  app.use(cors({
    origin: 'http://localhost:3000' // 你的前端本地运行地址
  }));
  

• Heroku后端状态：直接访问https://node-test-mongo.herokuapp.com/api/blog，确认后端接口能正常返回数据，排除服务未启动或接口异常的问题。

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