title: MERN Stack Application - Client not sending data - Express API NOT WORKING
body: <p>I've been searching for a solution for this for days. I've checked over 20 websites, dozens of StackOverflow questions, Reddit, and more..please help.</p>
  <p>I've created a MERN application by piecing multiple different sources together. The app works in development. The SubscriptionForm takes the email and stores it in the database fine, but when it is deployed, nothing is saving.</p>
  <p>I was  getting a 500 Internal Server Error before, but that's gone away.</p>
  <p>I think it may have to do with either the environment variables or the routes, but I just can't put my finger on it. I've tried so many variations of different things.</p>
  <p>If you need any other information, please let me know. Thanks in advance!</p>
  <p>Here are the relevant files.</p>
  <p><strong>wavelength/client/src/components/SubscriptionForm.js</strong></p>
  <pre><code>    import React, { useState } from 'react';
  
  import { useNavigate } from 'react-router-dom';
  
  import { Form, Button } from 'react-bootstrap';
  import styled from 'styled-components';
  
  const FormContainer = styled.div`
      padding: 5px 5px 10px 5px;
      margin-bottom: 10px;
  `;
  
  const SubscribeHeader = styled.h3`
      font-size: 1.6em;
      font-weight: 700;
      padding: 0 0 5px 0;
  `;
  
  export default function SubscriptionForm() {
      const [email, setEmail] = useState('');
  
      const navigate = useNavigate();
  
      const handleEmailChange = (e) =&gt; {
          setEmail(e.target.value)
      }
  
      // FIX THIS FUNCTION
      const handleSubmit = (e) =&gt; {
          e.preventDefault();
          const url = '/routes/homeRoutes';
          const requestOptions = {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ email })
          }
          fetch(url, requestOptions)
              .then(response =&gt; console.log('Submitted Successfully'))
              .catch(error =&gt; console.log('Form Submit Error', error))
      
          setEmail('');
          navigate('/');
      };
  
      return (
          &lt;FormContainer&gt;
              &lt;SubscribeHeader&gt;Subscribe Please&lt;/SubscribeHeader&gt;
              &lt;Form onSubmit={handleSubmit} method='POST' action='http://localhost:5000'&gt;
                  
                  &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;email&quot;&gt;
                      &lt;Form.Control 
                          type=&quot;email&quot; 
                          placeholder=&quot;Enter email address&quot;
                          onChange={handleEmailChange}
                          value={email}
                      /&gt;
                  &lt;/Form.Group&gt;
                  
                  &lt;Button variant=&quot;primary&quot; type=&quot;submit&quot;&gt;
                      Subscribe
                  &lt;/Button&gt;
              &lt;/Form&gt;
          &lt;/FormContainer&gt;
      );
  }
  </code></pre>
  <p><strong>wavelength/server.js</strong></p>
  <pre><code>const express = require('express');
  const path = require('path');
  const app = express();
  const cors = require('cors');
  require('dotenv').config({ path: './config.env' });
  const port = process.env.PORT || 5000;
  
  // Middlewares
  app.use(cors());
  app.use(express.json());
  app.use(require('./routes/homeRoutes'));
  
  // get driver connection
  const dbo = require('./db/conn');
  
  if (process.env.NODE_ENV === 'production') {
      app.use(express.static(path.join('client', 'build')));
  
      app.use('*', (req, res) =&gt; {
          res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
      });
  }
  
  // Start up server
  app.listen(port, () =&gt; {
      // Perform a database connection when the server starts
      dbo.connectToServer((err) =&gt; {
          if (err) console.log(err);
      });
  });
  </code></pre>
  <p><strong>wavelength/db/conn.js</strong></p>
  <pre><code>const { MongoClient } = require('mongodb');
  const Db = process.env.ATLAS_URI;
  const client = new MongoClient(Db, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
  });
  
  let _db;
  
  module.exports = {
      connectToServer: function (callback) {
          client.connect(function (err, db) {
              // Verify we got a good 'db' object
              if (db) {
                  _db = db.db('wavelength');
                  console.log('Successfully connected to MongoDB');
              }
              return callback(err);
          });
      },
  
      getDB: function () {
          return _db;
      },
  };
  </code></pre>
  <p><strong>wavelength/routes/homeRoutes.js</strong></p>
  <pre><code>const express = require('express');
  
  // homeRoutes is an instance of the express router
  // It is being used to define routes
  // The router will be added as a middleware and will take control
  // of requests starting with the path / record
  const homeRoutes = express.Router();
  
  // This is to connect to the database
  const dbo = require('../db/conn');
  
  // This route will Create a new subscriber
  homeRoutes.route('/').post((req, response) =&gt; {
      let db_connect = dbo.getDB();
      let myObj = {
          email: req.body.email,
      };
      db_connect.collection('subscriptions').insertOne(myObj, (err, res) =&gt; {
          if (err) throw err;
          response.json(res);
      });
  });
  
  module.exports = homeRoutes;
  </code></pre>