NextJS 13中Fetch API未用指定端口致404问题求助

检查fetch的执行场景 #

• 如果fetch在服务器组件中调用，Next.js的重写规则对服务器端发起的请求不生效，直接使用后端完整地址即可：fetch("http://localhost:5000/api/blog/")。
• 如果是客户端组件，确保请求在浏览器环境执行——用useEffect包裹fetch，避免在SSR阶段发起请求：

  useEffect(() => {
    const getBlogData = async () => {
      const res = await fetch("/api/blog/");
      // 处理响应逻辑
    };
    getBlogData();
  }, []);
  

验证重写配置与服务状态 #

• 确认next.config.js的重写规则格式正确，修改配置后必须重启Next.js开发服务器才能生效：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    async rewrites() {
      return [
        {
          source: "/api/:path*",
          destination: "http://localhost:5000/:path*",
        },
      ];
    },
  };
  
  module.exports = nextConfig;
  

• 同时重启后端服务，避免端口占用或服务未正常启动导致的请求失败。

排查缓存与路径问题 #

• 清除浏览器缓存，用无痕模式测试，避免旧缓存导致请求地址错误。
• 检查fetch路径的拼写，比如末尾的斜杠"/api/blog/"是否与后端路由匹配，路径不一致会导致重写规则不触发。

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