Clash Royale CLAN TAG#URR8PPP

(Node.js and React) Cannot POST / when submitting form

I'm trying to create a form with Node.js and React where you can input your email to submit it to a Mailchimp newsletter, but when I click submit, I get a "Cannot POST /" error.

This is 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);
);



This is 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"




This is App.js in my client React app. The input field for the name still isn't meant to do anything yet, just the email.

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;


And this is the package.json in the client React app


"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"





Also if it helps mentioning, I'm going to deploy it on Heroku.

Thanks

Edit: the browser console displays "Failed to load resource: the server responded with a status of 404 (Not Found)"

process.env.PORT

5000

create-react-app

1 Answer
1

Do you use webpack-dev as react development server?

If so you need to setup proxy there, webpack.config.js like:

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


);

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


);

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.