In „…“ sind keine HTTP-Methoden exportiert. Exportieren Sie benannte Exporte für jede HTTP-Methode

Question

Ich arbeite an einem React.js/Next.js-Projekt mit Google reCAPTCHA. Mein Frontend scheint zu funktionieren (das weiß ich, weil ich die Druckanweisungen eingerichtet habe), aber das Backend gibt mir diesen Fehler in meinem lokalen Terminal:

Fehler – Keine HTTP-Methode in „srcappapirecaptcharoute.ts“ exportiert. Exportieren Sie benannte Exporte für jede HTTP-Methode.

Außerdem erhalte ich einen Fehler in meinen Entwicklungstools:

'POST http://localhost:3000/api/recaptcha 405 (Methode nicht zulässig)'

Ich denke, das hängt mit anderen Fehlern zusammen.

Das ist der Code:

import { NextApiRequest, NextApiResponse } from 'next';
import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
import axios from 'axios';

const app = express();
app.use(cors());
app.use(bodyParser.json());

console.log('hi');

export async function postHandler(req: NextApiRequest, res: NextApiResponse){

  if (req.method === 'POST') {
    const { token } = req.body;
    try {
      const response = await axios.post(
      `https://www.goog le.com/recaptcha/api/siteverifysecret=${process.env.NEXT_PUBLIC_RECAPTCHA_SECRET_KEY}&response=${token}`
      );

      console.log('you made it here');

      if (response.data.success) {
        res.status(200).json({ message: 'reCAPTCHA verification successful' });
      } else {
        res.status(400).json({ message: 'reCAPTCHA verification failed' });
      }
    } catch (err) {
      console.log(err);
      res.status(500).json({ message: 'Internal server error' });
    }
  };
}

Ich habe versucht, die Funktion umzubenennen, sie als const zu exportieren und sie am Ende der Datei und nicht zum Zeitpunkt der Benennung zu exportieren.

Answer 1

如果您使用的是 NextJS 13 App Router，请使用以下代码：
文件：./app/api/recaptcha/route.ts

import { NextResponse } from 'next/server';
import axios from 'axios';

export async function POST(req: Request){
  const { token } = req.body;
  try {
    const response = await axios.post(`https://www.google.com/recaptcha/api/siteverify?secret=${process.env.NEXT_PUBLIC_RECAPTCHA_SECRET_KEY}&response=${token}`,{},{headers: { "Content-Type": "application/x-www-form-urlencoded; charset=utf-8" }});
    if (response.data.success) {
      return NextResponse.json({ message: 'reCAPTCHA verification successful' })
    } else {
      return NextResponse.json({ message: 'reCAPTCHA verification failed' })
    }
  } catch (err) {
    return NextResponse.json({ message: 'Internal server error' })
  }
}

如果您使用的是 NextJs 13 Page Router，则使用：
文件：./pages/api/recaptcha.ts

import { NextApiRequest, NextApiResponse } from 'next';
 
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'POST') {
    const { token } = req.body;
    try {
      const response = await axios.post(`https://www.google.com/recaptcha/api/siteverify?secret=${process.env.NEXT_PUBLIC_RECAPTCHA_SECRET_KEY}&response=${token}`,{},{headers: { "Content-Type": "application/x-www-form-urlencoded; charset=utf-8" }});
      if (response.data.success) {
        return res.status(200).json({ message: 'reCAPTCHA verification successful' })
      } else {
        return res.status(400).json({ message: 'reCAPTCHA verification failed' })
      }
    } catch (err) {
      return res.status(500).json({ message: 'Internal server error' })
    }
  }
  else{
    res.status(405).json({message: "Method Not Allowed"})
  }
};
 
export default handler;

希望这能解决您的问题:)