Next.js前端Axios请求Rails后端返回404而非JSON数据

核心原因：端口冲突导致请求被Next.js拦截 #

Postman访问http://localhost:3000/books能拿到Rails的JSON数据，但Next.js前端发起相同请求却返回自身主页HTML，说明Next.js与Rails服务器占用了同一个3000端口。前端请求被运行在3000端口的Next.js服务器接收，根本没传到Rails后端，因此Rails日志无记录，而Next.js找不到/books路由，返回404状态码和主页HTML。

修复步骤 #

1. 调整端口避免冲突 #

• 停止当前运行的Next.js和Rails服务
• 保留Rails在3000端口运行，启动Next.js时指定其他端口：

  npm run dev -- -p 3001
  

  或修改next.config.js固定端口：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    port: 3001,
  }
  module.exports = nextConfig
  

2. 修正Rails CORS配置的Origin地址 #

当前CORS配置的origins 'http://localhost:80'与Next.js实际运行地址不符，需改为Next.js的端口地址：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3001' # 替换为Next.js实际运行的地址

    resource '*',
             headers: :any,
             methods: %i[get post put patch delete options head],
             expose: ['Authorization']
  end
end

修改后重启Rails服务生效。

3. 修复Axios异步请求逻辑 #

当前代码未等待请求完成就打印data，会输出null，同时未处理错误。改用async/await写法：

import axios from 'axios';

export default async function HomePageConnected() {
  let data = null;
  try {
    const response = await axios.get("http://localhost:3000/books");
    data = response.data;
    console.log("Data - ", data);
  } catch (error) {
    console.error("请求失败:", error);
  }

  return (
    <>
      <h1>Welcome, you are connected</h1>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </>
  )
}

4. 验证请求链路 #

调整端口后重新发起请求，查看Rails服务器日志是否有请求记录，同时通过浏览器控制台的Network面板，确认请求URL、状态码和响应内容是否符合预期。

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