Next.js 14应用路由POST请求报403 Method Not Allowed问题求助

问题 #

基于Next.js 14（App Router）创建简易POST接口时遇到403: Method Not Allowed错误，相关信息如下：

API调用代码 #

useEffect(() => {
    const testFunc = async () => {
        const response = await fetch("http://localhost:3000/helpers/edit-file.js", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({a: 123}),
        });
        await console.log(response);
    }
    testFunc();
}, []);

接口处理代码（已简化） #

export default async function handler(req, res) {
    if (req.method === "POST") {
        const data = req.body;
        res.status(200).json({ success: true, data });
    }
}

目录结构 #

.
├── public/
│   └── helpers/
│       └── edit-file.js
└── src/
    └── app/
        └── main_page/
            └── page.tsx

GET接口可正常运行，但POST、PUT请求均返回403错误，求问题原因及解决思路？

问题原因及解决思路 #

• 核心原因：接口文件位置与格式不符合App Router规则
  Next.js 14 App Router的API路由有严格的目录与命名要求：必须放在src/app/api/路径下，且文件命名为route.js/ts。你把接口文件放在public/目录，该目录仅用于存放静态资源（如图片、纯前端JS），Next.js会直接返回文件文本内容，不会执行其中的后端逻辑，自然无法处理POST请求，返回Method Not Allowed错误。之前的GET请求只是获取到了静态文件内容，并非真正执行接口逻辑。

• 解决步骤

  1. 创建合规的API目录：在src/app/下新建api/helpers/目录
  2. 迁移并重命名接口文件：将public/helpers/edit-file.js移动到src/app/api/helpers/，并重命名为route.js
  3. 适配App Router的API写法：App Router不再使用传统的req/res模式，需改用NextRequest和NextResponse，修改后的代码如下：

     import { NextResponse } from 'next/server';
     
     export async function POST(request) {
         const data = await request.json();
         return NextResponse.json({ success: true, data });
     }
     

  4. 修正请求地址：将fetch的URL改为"/api/helpers/edit-file"（无需带域名，Next.js会自动解析）

• 补充说明

  • 若需支持PUT等其他请求方法，只需在同个route.js文件中导出对应方法（如export async function PUT(request) {...}）
  • public/目录仅用于存放无需执行的静态资源，切勿将后端接口代码放在此目录

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