Next.js客户端调用localhost接口Fetch失败求助（附代码）

问题描述 #

每次运行Next.js项目客户端时，都会出现failed to fetch 'http://localhost:8080/api/v1/post'错误。该接口属于服务端模块，服务端已正常启动（提示信息：Server has started, MongoDB connected），且已安装并在server目录的index.js中配置了CORS。附上相关代码请求排查：

服务端index.js文件 #

const app = express();
app.use(cors());
app.use(express.json({limit: '50mb'}));

app.use('/api/v1/post', postRoutes);
app.use('/api/v1/dalle', dalleRoutes);


app.get('/', async(req, res) => {
    res.send('Hello from DALL-E!');
})

const startServer = async() => {
    try {
        connectDB(process.env.MONGODB_URL);
        app.listen(8080, () => console.log('Server has started on port http://localhost:8080'))
    }catch (error){
        console.log(error);
    }
    
};

客户端页面代码 #

const fetchPosts = async () => {
  setLoading(true);
  try {
    const response = await fetch('http://localhost:8080/api/v1/post', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    if (response.ok){
      const result = await response.json();
      setAllPosts(result.data.reverse());        
  }
 } catch(error){
    alert(error)
  } finally{
    setLoading(false);
  }

};

服务端postRoutes.js文件 #

import express from 'express';
import * as dotenv from 'dotenv';
import { v2 as cloudinary} from 'cloudinary';

import Post from '../mongodb/models/post.js';

dotenv.config();

const router = express.Router();

cloudinary.config({
    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET,

});


//GET ALL POSTS
router.route('/').get(async(req, res) => {
    try{
        const posts = await Post.find({});
        res.status(200).json({success: true, data: posts})
    } catch(error) {
        res.status(500).json({success: false, message: 'Fetching post failed, please try again'})

    }
});

//CREATE A POST
router.route('/').post(async(req, res) => {
    try{
    const {name , prompt, photo} = req.body;
    const photoUrl = await cloudinary.uploader.upload(photo);

    const newPost = await Post.create({
        name,
        prompt,
        photo: photoUrl.url,
    })
    res.status(201).json({ success: true, data: newPost});

    } catch (error){
        res.status(500).json({success: false, message:'Unable to create a post, please try again' })

    }
    });
export default router;

排查与解决方案 #

1. 验证服务端接口可用性 #

直接在浏览器或Postman中访问http://localhost:8080/api/v1/post：

• 若返回{"success":true,"data":[]}或包含数据的JSON，说明服务端接口正常，问题出在客户端请求配置。
• 若返回错误或无法访问，说明服务端路由或数据库连接存在隐性问题，需继续排查服务端。

2. 修复CORS配置（关键） #

默认cors()配置可能无法适配Next.js跨域场景，改为显式指定允许的客户端origin：

// 替换服务端index.js中的app.use(cors())
app.use(cors({
  origin: 'http://localhost:3000', // 替换为你的Next.js客户端实际端口（默认3000）
  credentials: true // 需携带Cookie等凭证时必须开启
}));

3. 优化客户端错误捕获逻辑 #

当前代码仅捕获网络错误，无法捕获HTTP状态码错误（如500、404），修改后可精准定位问题：

const fetchPosts = async () => {
  setLoading(true);
  try {
    const response = await fetch('http://localhost:8080/api/v1/post', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    if (response.ok){
      const result = await response.json();
      setAllPosts(result.data.reverse());        
    } else {
      // 处理HTTP错误（如500、404）
      const errorInfo = await response.json().catch(() => ({ message: response.statusText }));
      alert(`请求失败：${errorInfo.message}`);
    }
  } catch(error){
    // 处理网络错误（如端口不通、服务未启动）
    alert(`网络错误：${error.message}`);
  } finally{
    setLoading(false);
  }
};

4. 检查服务端路由导入与数据库查询 #

• 确认服务端index.js中正确导入postRoutes，补充导入代码：

  import postRoutes from './postRoutes.js'; // 替换为postRoutes.js的实际相对路径
  

• 在postRoutes的GET接口中添加日志，验证数据库查询是否正常：

  router.route('/').get(async(req, res) => {
      try{
          const posts = await Post.find({});
          console.log('数据库查询结果:', posts); // 添加日志
          res.status(200).json({success: true, data: posts})
      } catch(error) {
          console.log('查询失败原因:', error); // 添加日志
          res.status(500).json({success: false, message: 'Fetching post failed, please try again'})
      }
  });
  

  启动服务后查看控制台日志，确认数据库查询是否成功。

5. 用环境变量替代硬编码地址 #

在Next.js项目根目录创建.env.local文件，配置服务端地址：

NEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api/v1

客户端请求改为读取环境变量：

const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/post`, {
  // 其他配置不变
});

这种方式更灵活，后续部署时无需修改代码。

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