Je travaille sur un projet React.js/Next.js utilisant Google reCAPTCHA. Mon frontend semble fonctionner (je le sais car j'ai configuré les instructions d'impression), mais le backend me donne cette erreur dans mon terminal local :
Erreur - Aucune méthode HTTP exportée dans 'srcappapirecaptcharoute.ts'. Exportez les exportations nommées pour chaque méthode HTTP.
Obtenir également une erreur dans mes outils de développement :
'POST http://localhost:3000/api/recaptcha 405 (Méthode non autorisée)'
Je pense que cela est lié à d'autres bugs.
Voici le 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' });
}
};
}
J'ai essayé de renommer la fonction, de l'exporter sous forme const et de l'exporter à la fin du fichier plutôt qu'au moment du nom.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Si vous utilisez NextJS 13
App Routerveuillez utiliser le code suivant :Fichier :
./app/api/recaptcha/route.tsimport { 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' }) } }Si vous utilisez NextJs 13
Page Routeralors utilisez :Fichier :
./pages/api/recaptcha.tsimport { 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;J'espère que cela résout votre problème :)