Next.js 表单在本地工作，但不能在实时服务器上工作答案

【问题标题】：Next.js form works locally but not on live serverNext.js 表单在本地工作，但不能在实时服务器上工作
【发布时间】：2019-03-23 04:00:41
【问题描述】：

我一直在为我的一个副项目实现一个 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');
  });
});

【问题讨论】：

标签： javascript node.js reactjs next.js

【解决方案1】：

看起来 nextjs 试图渲染 /api/form 页面，但你得到了一个 not found 。

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

【讨论】：

我目前正在这样做！以下是我的 package.json 文件中的脚本："scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "node server.js", "build": "next build", "start": "node server.js", "export": "npm run build && next export" } 关于可能导致此问题的任何其他想法？
你不能使用自定义的 next.js 服务器，因为 Netlify 只能提供静态页面。

【解决方案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'
}

【讨论】：