Next.js 表单在本地有效，但在实时服务器上无效

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

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

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

就可以解决这个问题

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

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

Answer 2

nextjs 似乎试图呈现 /api/form 页面，但您得到了一个未找到的结果。

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

Next.js 表单在本地有效，但在实时服务器上无效

Next.js form works locally but not on live server

javascript

node.js

reactjs

next.js