J'ai implémenté une application Next.js pour un de mes projets parallèles. C'est un site basique de style brochure avec un formulaire de contact.

Le formulaire fonctionne parfaitement lorsque le site est exécuté localement, mais je viens de publier le site sur Netlify et maintenant, lors de la soumission d'un formulaire, je rencontre l'erreur suivante :

POST https://dux.io/api/form 404
Uncaught (in promise) Error: Request failed with status code 404
at e.exports (contact.js:9)
at e.exports (contact.js:16)
at XMLHttpRequest.d.(/contact/anonymous function) (https://dux.io/_next/static/cFeeqtpSGmy3dLZAZZWRt/pages/contact.js:9:4271)

Toute aide serait extrêmement appréciée!

Voici ma fonction d'envoi de formulaire :

async handleSubmit(e) {
e.preventDefault();

const { name, email, option, message } = this.state;

const form = await axios.post('/api/form', {
  name,
  email,
  option,
  message
});

this.setState(initialState);}

Ceci est mon fichier server.js:

const express = require('express');
const next = require('next');
const bodyParser = require('body-parser');
const mailer = require('./mailer');
const compression = require('compression');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();
  server.use(compression());
  server.use(bodyParser.json());

  server.post('/api/form', (req, res) => {
    const { email = '', name = '', option = '', message = '' } = req.body;
    mailer({ email, name, option, text: message })
      .then(() => {
        console.log('success');
        res.send('success');
      })
      .catch(error => {
        console.log('failed', error);
        res.send('badddd');
      });
  });

  server.get('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, err => {
    if (err) throw err;
    console.log('> Read on http://localhost:3000');
  });
});
0
Cesar Murphy 14 mars 2019 à 03:58

2 réponses

Meilleure réponse

Il semble que nextjs essaie de rendre la page /api/form et vous obtenez un introuvable avec cela.

Assurez-vous de démarrer le serveur avec node server.js au lieu de next start.

2
Tibi02 22 mars 2019 à 20:00

Et si vous essayiez d'utiliser le point de terminaison complet http://~~~/api/form au lieu de simplement /api/form ?

Ou je pense que vous pouvez résoudre ce problème si vous utilisez process.env

const config = {
  endpoint: 'http://localhost:8080/api'
}

if (process.env.NODE_ENV === 'production') {
  config.endpoint = 'hostname/api'
}
0
kkangil 14 mars 2019 à 08:47