（Node.js和React）提交表單時無法POST /

Question

我正在嘗試使用Node.js和React創建一個表單，您可以在其中輸入您的電子郵件以將其提交給Mailchimp時事通訊，但是當我單擊“提交”時，出現“無法發布/”錯誤。

這是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' } } });