Make it work with SPAs like React, Vue, Angular

[deadcoder0904]

I have basically this form

<form action="URL/api/list/subscribe" target="_blank">
  <label for="signup-email">Email</label>
  <input type="email" value="" name="email" label="signup-email" />
  <input type="hidden" name="subscribeKey" value="key" />
  <input type="hidden" name="redirectOnSuccess" value="/success" />
  <input type="hidden" name="redirectOnFailure" value="/failure" />
  <input type="submit" value="Subscribe" name="Subscribe" />
</form>

But I want it to have a client-side validation & so I used FormData. If you don't know what FormData is & never heard about it (I didn't) it works like Form but through JavaScript rather than HTML.

I am using React & I implemented something like this -

import React from "react";

class Sub extends React.Component {
  state = { email: "" };

  _onEmailChange = e => {
    this.setState({ email: e.target.value });
  };

  _onSubmit = e => {
    e.preventDefault();
    if (this.state.email === "") return;

    const URL = `URL/api/list/subscribe`;
    const body = new FormData(this.form);
    fetch(URL, {
      method: "POST",
      body,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "multipart/form-data"
      }
    })
      .then(res => {
        return res.json();
      })
      .then(data => {
        console.log(JSON.stringify(data, null, "\t"));
      })
      .catch(err => {
        console.error(err);
      });
  };

  render() {
    return (
      <form
        action="URL/api/list/subscribe"
        ref={el => {
          this.form = el;
        }}
        onSubmit={this._onSubmit}
      >
        <input
          type="email"
          onChange={this._onEmailChange}
          value={this.state.email}
          name="email"
        />
        <input
          type="hidden"
          name="subscribeKey"
          value="key"
        />
        <input
          type="hidden"
          name="redirectOnSuccess"
          value="/subscribe?done=true"
        />
        <input
          type="hidden"
          name="redirectOnFailure"
          value="/subscribe?done=false"
        />
        <input type="submit" value="Subscribe" name="Subscribe" />
      </form>
    );
  }
}

export default Sub;

Everything is same, just implemented in React using this CodePen as inspiration but still it doesn't work

If I use method as GET I get TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body which is true. So I make method as POST & I get 404: Not Found since that route doesn't exist.

So why do I need this? To perform client-side validation & embedding it on a single-page application like React or Gatsby. Also, if an API can be provided, it'd be awesome :)

How do I solve this?

[freezix]

The route your posting at only accept GET method, that's why you get a 404. If you want to post new subscribers according to the route file for the lists you should post at /api/list/add/subscribers :

 // Post new subscribers
  app.post('/api/list/add/subscribers', apiIsAuth, writeListAccess, (req, res) => {
    addSubscribers(req, res);
});