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

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

1 个答案: