title: ReactJS and Express with Axios returning 404
body: <p>Not sure what's going on with my code, but I'm trying to just do a test run with axios console logging something out, but I'm getting a 404.</p>
  
  <pre><code>class SubscribeForm extends Component {
    constructor(props) {
      super(props);
      this.state = {value: ''};
  
      this.emailChange = this.emailChange.bind(this);
      this.emailSubmit = this.emailSubmit.bind(this);
    }
  
    emailChange(e) {
      this.setState({value: e.target.value});
    }
  
    emailSubmit(e) {
      e.preventDefault();
      axios.post('/subscribe', {
        email: 'someemail@email.com',
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          "Access-Control-Allow-Origin": "*",
        }
      }).then(res =&gt; {
        if(res.data.success) {
          this.setState({email: ''})
        }
      }).catch(error =&gt; {
        if (error.response) {
          // The request was made and the server responded with a status code
          // that falls out of the range of 2xx
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // The request was made but no response was received
          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
          // http.ClientRequest in node.js
          console.log(error.request);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log('Error', error.message);
        }
        console.log(error.config);
      });
    }
  
    render() {
      const { classes } = this.props;
      return (
        &lt;div className={classes.subFormSection}&gt;
          &lt;p className={classes.formHelper}&gt;
            Join the club, enter your email address
          &lt;/p&gt;
  
          &lt;form method="post" className={classes.subFormWrap} onSubmit={this.emailSubmit}&gt;
            &lt;TextField
              value = {this.state.value}
              onChange = {this.emailChange}
            /&gt;
            &lt;Button
              className={classes.button}
              type="submit"
            &gt;
              Send
              &lt;Icon className={classes.rightIcon}&gt;send&lt;/Icon&gt;
            &lt;/Button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I tried adding headers into axios to see if thats the issue, but i don't think it is (or perhaps I'm doing it wrong).</p>
  
  <p>Also, I don't have a /subscribe file, I don't think I need one? Since, I'm capturing it with express here:</p>
  
  <pre><code>const cors = require("cors");
  
  app.use(cors());
  
  app.post("/subscribe", (req, res, next) =&gt; {
    console.log(req.body.email);
  });
  </code></pre>
  
  <p>This file is within my server files, while the react portion is within client files. I have proxy set up, so when I have run the server, front end and back end is talking to each other.</p>
  
  <hr>
  
  <p><strong>Updated 404 status turned (pending)</strong></p>
  
  <p>I also have set up proxy middleware in my client folder <code>setupProxy.js</code></p>
  
  <pre><code>const proxy = require("http-proxy-middleware");
  
  module.exports = function(app) {
    app.use(proxy("/subscribe", {
      target: "http://localhost:5000"
    }));
  };
  </code></pre>
  
  <p>I'm getting in the request header in my network request for <code>/subscrib</code>:</p>
  
  <pre><code>Provisional headers are shown
  </code></pre>
  
  <p>Is this causing it to be (pending)?</p>