（Node.js 和 React）无法 POST / 提交表单时

Question

我正在尝试使用 Node.js 和 React 创建一个表单，您可以在其中输入您的电子邮件以将其提交到 Mailchimp 时事通讯，但是当我单击提交时，我收到“无法 POST /”错误。

这是 server.js

const bodyParser = require('body-parser');
const favicon = require('serve-favicon');

const express = require('express');
const app = express();

app.use(express.static(__dirname + '/client/public'));

app.use(bodyParser.urlencoded({ extended: false }));

app.use(bodyParser.json());

app.use(favicon(__dirname + '/public/favicon.ico'));

app.listen(process.env.PORT, function() {
  console.log("Listening to the application");
});

app.get('/', (req, res) => {
  res.send("res");
});

app.post('/', (req, res) => {
  sendEmailToMailchimp(req.body.email);
  console.log(req.body.email);
});

function sendEmailToMailchimp(email){
  console.log("Sending " + email + " to Mailchimp.");

  var request = require("request");

  var options = { method: 'POST',
    url: 'https://us18.api.mailchimp.com/3.0/lists/f9c3130fc4/members',
    headers:
     { 'Postman-Token': 'f6c16b72-09b7-48f2-926b-b156a428c67b',
       'Cache-Control': 'no-cache',
       Authorization: 'Basic YW55c3RyaW5nOmNiNTQyYzA1NWVmMjY1ZTI4Y2I0ZDk0NmRhZmM5MmYzLXVzMTg=',
       'Content-Type': 'application/json' },
    body: { email_address: email, status: 'subscribed' },
    json: true };

  request(options, function (error, response, body) {
    if (error) throw new Error(error);

    //console.log(body);
  });
}

这是 package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "keywords": [
    "example",
    "heroku"
  ],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "body-parser": "^1.18.3",
    "concurrently": "^3.6.1",
    "express": "^4.16.3",
    "jquery": "^3.3.1",
    "nodemon": "^1.18.3",
    "request": "^2.87.0",
    "serve-favicon": "^2.5.0"
  },
  "engines": {
    "node": "8.11.1"
  }
}

这是我的客户端 React 应用中的 App.js。名称的输入字段仍然不打算做任何事情，只是电子邮件。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <form className="newsletterSignup" action="/" method="post">

          <label>NAME</label>
          <input id="nameInput" className="infoInput inlineInput" name="userName" placeholder="John Ipcus" type="text" required></input>

          <label>EMAIL ADDRESS</label>
          <input id="emailInput" className="infoInput inlineInput" name="userEmailAddress" placeholder="joe@shmoe.com" type="text" required></input>

          <input id="signUpBtn" value="SUBMIT" type="submit"></input>

        </form>
      </div>
    );
  }
}

export default App;

这是客户端 React 应用中的 package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": {
    "/":  {
        "target": "http://localhost:5000",
        "secure": "false"
    }
  }
}

另外，如果它有助于提及，我将在 Heroku 上部署它。

谢谢

编辑：浏览器控制台显示“加载资源失败：服务器响应状态为 404（未找到）”

Answer 1

你使用 webpack-dev 作为 react 开发服务器吗？

如果是这样你需要在那里设置代理，webpack.config.js 比如：

module.exports = setup({ context: __dirname, entry: './app.js', devServer: { proxy: { '/api': 'http://127.0.0.1:50545' } } });