next.js 我的POST API路由查询失败的原因是什么？

svmlkihl 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(109)

我在一个非常简单的案例中测试了这一点：

//route.ts 
export async function GET() {
 
  return new Response('Hello, Next.js!', {
    status: 200,
  })
}

字符串
我可以通过以下方式调用此功能：

const response = await fetch(`${API_BASE_URL}generate/test`, {
method: 'GET',
headers: {
  'Content-Type': 'application/json',
},
}

型
它返回'Hello，Next.js！'好。

但是如果我将相同的路由改为POST而不是GET，比如：

//route.ts
export async function POST() {     
  return new Response('Hello, Next.js!', {
    status: 200,
  })
}

型
并通过调用它：

const response = await fetch(`${API_BASE_URL}generate/test`, {
method: 'POST',
headers: {
  'Content-Type': 'application/json',
},
body: "AA",
}

型
preflight请求现在失败了，请求返回405错误;所以似乎由于某种原因，当我将其更改为POST方法时，next.js不再处理此路由。这是一个bug，或者为什么？
我尝试过的一些事情：

Next.js v13和v14都有同样的问题。
尝试使用和不使用中间件。
确认响应头对于预检是正确的（allowedOrigin、allowedMethods和allowedHeaders都可以）。
检查发现，当我调用我的路由时，next.js说它正在编译特定的路由，所以它似乎识别它，但出于某种原因没有处理它。

即使在最简单的情况下，我也无法让POST方法API路由器工作。可能是什么问题？

next.js

来源：https://stackoverflow.com/questions/77392920/what-is-the-reason-for-my-post-api-route-handler-failing

1条答案

按热度按时间

jogvjijk1#

以下是我使用的解决方案：
在中间件.ts中：

export const corsHeaders = {
  "Access-Control-Allow-Origin": "http://localhost:19006",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type, Authorization",
};

export async function middleware(request: NextRequest) {
  const response = NextResponse.next()

  // Need to handle OPTIONS request here, unless you want to not use middleware
  // In which case you can define the OPTIONS method and set the CORS headers within route.ts
  // But using middleware is nice to avoid boilerplate of setting CORS on each route
  if (request.method === 'OPTIONS') {
    return NextResponse.json({}, {headers: corsHeaders})
  }

  // Then here set the CORS headers that will be returned with the regular response
  response.headers.append("Access-Control-Allow-Origin", corsHeaders['Access-Control-Allow-Origin'])
  response.headers.append("Access-Control-Allow-Methods", corsHeaders['Access-Control-Allow-Methods'])
  response.headers.append("Access-Control-Allow-Headers", corsHeaders['Access-Control-Allow-Headers'])
  
  // Continue to eventually call the matching route.ts method
  return response;
}

字符串
值得注意的问题是：CORS对GET和POST请求的处理方式不同，所以我的测试是有缺陷的。你必须在OPTIONS请求上设置CORS头（如果没有在每个route.ts中定义OPTIONS，那么就提前返回）以及正常请求。感谢phil帮助我解决这个问题。

赞(0）回复(0）举报 2023-11-18

我来回答

next.js 我的POST API路由查询失败的原因是什么？

1条答案

相关问题

热门标签

最新问答