Question

我一直在为我的副项目实现Next.js应用程序。这是一个基本的小册子式网站，带有联系表。

当站点在本地运行时，该表单运行良好，但是我刚刚将该站点发布到Netlify，现在提交表单时遇到以下错误：

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)

任何帮助将不胜感激！

这是我的表单提交功能：

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);}

这是我的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');
  });
});

Answer 1

nextjs似乎试图渲染/api/form页面，但您找不到该页面。

请确保使用node server.js而不是next start来启动服务器。

Answer 2

尝试使用完整端点http://~~~/api/form而非仅使用/api/form怎么样？

或者我认为，如果您使用process.env

，就可以解决此问题。

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

if (process.env.NODE_ENV === 'production') {
  config.endpoint = 'hostname/api'
}

Next.js表单可在本地使用，但不能在实时服务器上使用

2 个答案: