NextJS13 API请求体在API处理程序中为空

cgfeq70w  于 2023-06-05  发布在  其他
关注(0)|答案(1)|浏览(161)

我建立了一个新的NextJs项目(v13.4.1)。在路径src>app>api中有一个route.js文件。下面是route.js文件中的代码

import { NextResponse } from "next/server";

export async function POST(request) {
  console.log("Request :: ", request);
  return NextResponse.json({ msg: "success" });
}

在控制台中,请求不包含我传递的body。我用JSON体调用了API。
这里是控制台。

Request ::  NextRequest [Request] {
  [Symbol(realm)]: { settingsObject: { baseUrl: undefined } },
  [Symbol(state)]: {
    method: 'POST',
    localURLsOnly: false,
    unsafeRequest: false,
    body: { stream: undefined, source: null, length: null },
    client: { baseUrl: undefined },
    reservedClient: null,
    replacesClientId: '',
    window: 'client',
    keepalive: false,
    serviceWorkers: 'all',
    initiator: '',
    destination: '',
    priority: null,
    origin: 'client',
    policyContainer: 'client',
    referrer: 'client',
    referrerPolicy: '',
    mode: 'cors',
    useCORSPreflightFlag: true,
    credentials: 'same-origin',
    useCredentials: false,
    cache: 'default',
    redirect: 'follow',
    integrity: '',
    cryptoGraphicsNonceMetadata: '',
    parserMetadata: '',
    reloadNavigation: false,
    historyNavigation: false,
    userActivation: false,
    taintedOrigin: false,
    redirectCount: 0,
    responseTainting: 'basic',
    preventNoCacheCacheControlHeaderModification: false, 
    done: false,
    timingAllowFailed: false,
    headersList: HeadersList {
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: [Map]
    },
    urlList: [ [URL] ],
    url: URL {
      href: 'http://localhost:3000/api',
      origin: 'http://localhost:3000',
      protocol: 'http:',
      username: '',
      password: '',
      host: 'localhost:3000',
      hostname: 'localhost',
      port: '3000',
      pathname: '/api',
      search: '',
      searchParams: URLSearchParams {},
      hash: ''
    }
  },
  [Symbol(signal)]: AbortSignal { aborted: false },      
  [Symbol(headers)]: HeadersList {
    [Symbol(headers map)]: Map(15) {
      'accept' => [Object],
      'cache-control' => [Object],
      'connection' => [Object],
      'content-type' => [Object],
      'custom-header' => [Object],
      'host' => [Object],
      'transfer-encoding' => [Object],
      'user-agent' => [Object],
      'x-forwarded-for' => [Object],
      'x-forwarded-host' => [Object],
      'x-forwarded-port' => [Object],
      'x-forwarded-proto' => [Object],
      'x-invoke-path' => [Object],
      'x-invoke-query' => [Object],
      'x-middleware-invoke' => [Object]
    },
    [Symbol(headers map sorted)]: Map(15) {
      'accept' => 'application/json',
      'cache-control' => '',
      'connection' => 'close',
      'content-type' => 'application/json',
      'custom-header' => 'This is a custom header',      
      'host' => 'localhost:3000',
      'transfer-encoding' => 'chunked',
      'user-agent' => 'Thunder Client (https://www.thunderclient.com)',
      'x-forwarded-for' => '::ffff:127.0.0.1',
      'x-forwarded-host' => 'localhost:3000',
      'x-forwarded-port' => '3000',
      'x-forwarded-proto' => 'http',
      'x-invoke-path' => '/api',
      'x-invoke-query' => '%7B%7D',
      'x-middleware-invoke' => ''
    }
  },
  [Symbol(internal request)]: {
    cookies: RequestCookies { _parsed: Map(0) {}, _headers: [HeadersList] },
    geo: {},
    ip: undefined,
    nextUrl: NextURL { [Symbol(NextURLInternal)]: [Object] },
    url: 'http://localhost:3000/api'
  }
}

这是当我点击API时的头和体。
Calling API headerCalling API body
在这里,API调用成功了,我从上面的函数中得到了我发送的响应。
我试着从不同的客户端调用API,
什么都没用。

ncecgwcz

ncecgwcz1#

由于您使用的是AppRouter,因此需要使用标准的API方法来读取请求体

import { NextResponse } from 'next/server';
 
export async function POST(request) {
  const body = await request.json(); // 👈
  console.log("Request :: Body :: ", body);
  return NextResponse.json({ msg: "success" });
}

请参见路由处理程序-请求正文

相关问题