为什么我收到“500（内部服务器错误）”消息和“未捕获（承诺中）语法错误：意外的标记<” ”？

Question

我试图通过对 Next.js API 路由的 fetch API POST 请求将一些数据插入数据库，但我在浏览器控制台中收到以下两条错误消息：

api/addCompany/addCompany:1 无法加载资源：服务器响应状态为 500（内部服务器错误） register:1

Uncaught (in Promise) SyntaxError: Unexpected token <;在 JSON 中的位置 0

这些是我项目的文件夹（由于 Next.js 的路由系统而相关）

这是我执行 fetch API 请求的组件（请不要评判我糟糕的 Typescript 技能，我我是新来的，仍然没有找到正确的事件类型）：

import styles from '../styles/Register.module.css'
import { NextPage } from "next"
import { prisma } from '../prisma/prisma_client';
import { Prisma } from '@prisma/client';
import { useSession } from "next-auth/react"

const Register: NextPage = () => {
  
  const createCompany: any = async (event: any) => {
    event.preventDefault()

    const company: Prisma.CompanyCreateInput = {
      companyName: event.target.companyName.value,
      gender: event.target.gender.value,
      firstName: event.target.firstName.value,
      lastName: event.target.lastName.value,
      street: event.target.street.value,
      houseNumber: parseInt(event.target.houseNumber.value),
      postcode: parseInt(event.target.postcode.value),
      city: event.target.city.value,
      country: event.target.country.value,
      countryCode: event.target.countryCode.value,
      callNumber: parseInt(event.target.callNumber.value),
      emailAddress: event.target.emailAddress.value,
      website: event.target.website.value,
      socials: {},
      companyUser: {
        connect: { id: 'cl0y4y8xo0021mwtcmwlqfif6' }
      }
    }

    const companyJSON = JSON.stringify(company)
    const endpoint = '/api/addCompany/addCompany'
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: companyJSON,
    }

    const response = await fetch(endpoint, options)

    const data = await response.json()
    console.log(data)
  }

  return (
    <form onSubmit={createCompany} className={styles.form} id="signupForm" noValidate>
      <h2>Company Information</h2>

      <div className="fieldWrapper">
        <input type="text" id="companyName" name="companyName" placeholder=" " />
        <label htmlFor="companyName">Company Name<span>*</span></label>
        <div className='errorMessage'></div>
      </div>

      <div className="fieldWrapper">
        <input type="text" list="genders" id="gender" name="gender" placeholder=" " />
        <label htmlFor="gender">Gender<span>*</span></label>
        <div className='errorMessage'></div>
        <datalist id="genders">
          <option>Female</option>
          <option>Male</option>
        </datalist>
      </div>

      <div className="fieldWrapper">
        <input type="text" id="firstName" name="firstName" placeholder=" " />
        <label htmlFor="firstName">First Name<span>*</span></label>
        <div className='errorMessage'></div>
      </div>

      <div className="fieldWrapper">
        <input type="text" id="lastName" name="lastName" placeholder=" " />
        <label htmlFor="lastName">Last Name<span>*</span></label>
        <div className='errorMessage'></div>
      </div>

      <div className="fieldWrapper">
        <input type="text" id="street" name="street" placeholder=" " />
        <label htmlFor="street">Street<span>*</span></label>
        <div className='errorMessage'></div>
      </div>

      <div className="fieldWrapper">
        <input type="number" id="houseNumber" name="houseNumber" placeholder=" " />
        <label htmlFor="houseNumber">House Number<span>*</span></label>
        <div className='errorMessage'></div>
      </div>

      <div className="fieldWrapper">
        <input type="number" id="postcode" name="postcode" placeholder=" " />
        <label htmlFor="postcode">Postcode<span>*</span></label>
        <div className='errorMessage'></div>
      </div>

      <div className="fieldWrapper">
        <input type="text" id="city" name="city" placeholder=" " />
        <label htmlFor="city">City<span>*</span></label>
        <div className='errorMessage'></div>
      </div>

      <div className="fieldWrapper">
        <input type="text" id="country" name="country" placeholder=" " />
        <label htmlFor="country">Country<span>*</span></label>
        <div className='errorMessage'></div>
      </div>

      <div className="fieldWrapper">
        <input type="text" id="countryCode" name="countryCode" placeholder=" " />
        <label htmlFor="countryCode">Country Code<span>*</span></label>
        <div className='errorMessage'></div>
      </div>

      <div className="fieldWrapper">
        <input type="number" id="callNumber" name="callNumber" placeholder=" " />
        <label htmlFor="callNumber">Call Number<span>*</span></label>
        <div className='errorMessage'></div>
      </div>

      <div className="fieldWrapper">
        <input type="email" id="emailAddress" name="emailAddress" placeholder=" " />
        <label htmlFor="emailAddress">Email Address<span>*</span></label>
        <div className='errorMessage'></div>
      </div>

      <div className="fieldWrapper">
        <input type="text" id="website" name="website" placeholder=" " />
        <label htmlFor="website">Website</label>
      </div>

      <div className="fieldWrapper">
        <input type="text" id="socials" name="socials" placeholder=" " />
        <label htmlFor="socials">Socials</label>
      </div>

      <div className="fieldWrapper">
        <button type="submit">Save</button>
      </div>
    </form>
  )
}

export default Register

这是 addCompany 文件的代码，用作我的 fetch API 请求的 Next.js API 路由：

import { Prisma } from '@prisma/client';
import { NextApiRequest, NextApiResponse } from 'next';
import { prisma } from '../../../prisma/prisma_client';

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    const {body} = req;

    const companyData: Prisma.CompanyCreateInput = JSON.parse(body);

    const addCompany = await prisma.company.create({
        data: companyData
    })
     res.status(200).json(addCompany);
}

export default handler

我感谢任何帮助。谢谢。

我尝试注释掉 const data =等待response.json() console.log(data) 在 Register 组件中，因此错误“Uncaught (in Promise) SyntaxError: Unexpected token < in JSON atposition 0”消失了，但这根本无法解决问题。 我还尝试将获取请求的路线调整为任何可能的选项，因为我不确定 Next.js 究竟如何自动完成它，例如我尝试过：“/api/addCompany/addCompany.ts”等。

我希望问题很小，希望不是打字错误。 再次感谢您。

PS：我也检查了有关此事的类似帖子，但找不到解决我的问题的方法。

Answer 1

无需重新解析 API 端点中的正文数据，因为 Next.js 中间件 已将该数据转换为对象：

API 路由提供内置中间件来解析传入的
请求（req）。这些中间件是：

• req.cookies - 包含请求发送的 cookie 的对象。默认为 {}
• req.query - 包含查询字符串的对象。默认为 {}
• req.body - 包含由 content-type 解析的正文的对象，如果没有发送正文，则为 null< /strong>

类似下面的内容应该可以工作：

import { Prisma } from '@prisma/client';
import { NextApiRequest, NextApiResponse } from 'next';
import { prisma } from '../../../prisma/prisma_client';

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    const {body: companyData} = req;

    //const companyData: Prisma.CompanyCreateInput = JSON.parse(body);<- No need to reparse the data here

    const addCompany = await prisma.company.create({
        data: companyData
    })
     res.status(200).json(addCompany);
}

export default handler

感谢这个答案此处进行澄清。