1

I have a Node/Express server running on the back end, and a react front end, and am trying to make the simplest API - yet no matter what I do I seem to be getting an error 404 in the post request. I've tried adding a proxy into package.json, removing the proxy and including the port in the address i..e http://localhost:5000/createaccount, including the proxy to http://localhost:5000 and just using '/createaccount' in the post request. I've tried various things with CORS and headers, nothing seems to be working.

When I go to http://localhost:5000/createaccount in my browser separately, it does successfully log "hello world" so I know the server running. I'm also aware for now nothing is actually being done with the sent data, just trying to actually establish a connection for now! I've also tried uncommenting/commenting out most things within the fetch request to no avail.

Server.js code:

// server.js

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const PORT = 5000;
const cors = require("cors");

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.get("/createaccount", (req, res) => {
  console.log("test");
  res.append("Access-Control-Allow-Origin", ["*"]);
  res.append("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.append("Access-Control-Allow-Headers", "Content-Type");
  res.send("testComplete");
});

app.listen(PORT, function() {
  console.log("Server is running on Port: ", PORT);
});

CreateAccountjs code:

// Create.js

import React, { Component } from "react";
import axios from "axios";
import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap";

export default class CreateAccount extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);

    this.state = {
      email: "",
      password: ""
    };
  }

  handleChange = e => {
    this.setState({
      [e.target.id]: e.target.value
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const data = {
      email: this.state.email,
      password: this.state.password
    };
    fetch("http://localhost:5000/createaccount", {
      method: "POST", // *GET, POST, PUT, DELETE, etc.
      mode: "cors", // no-cors, cors, *same-origin
      headers: {
        "Content-Type": "application/json"
        // "Access-Control-Allow-Origin": "*"
        // 'Content-Type': 'application/x-www-form-urlencoded',
      },
      redirect: "follow", // manual, *follow, error
      referrer: "no-referrer", // no-referrer, *client
      body: JSON.stringify(data) // body data type must match "Content-Type" header
    }).then(res => console.log(res));
  };

  render() {
    return (
      <div className="CreateAccount">
        <form onSubmit={this.handleSubmit.bind(this)}>
          <FormGroup controlId="email">
            <FormLabel>Email</FormLabel>
            <FormControl
              type="email"
              value={this.state.email}
              onChange={this.handleChange.bind(this)}
            />
          </FormGroup>
          <FormGroup controlId="password">
            <FormLabel>Password</FormLabel>
            <FormControl
              value={this.state.password}
              onChange={this.handleChange.bind(this)}
              type="password"
            />
          </FormGroup>
          <Button type="submit">Sign up!</Button>
        </form>
      </div>
    );
  }
}

5
  • I see that you have 2 port localhost:5000/createaccount and localhost:5000/createaccount ? Commented May 18, 2019 at 13:17
  • What do you mean sorry? Commented May 18, 2019 at 13:22
  • I see that you have 2 port 1 http and 1 https ? Is this a typo or correct ? Commented May 18, 2019 at 13:23
  • Apologies, typo yes, when accessing in the browser I actually used http:// Commented May 18, 2019 at 13:24
  • your client is making a POST request but your server accepts GET request. you should change app.get("/createaccount", (req, res) => { to app.post("/createaccount", (req, res) => { Commented May 18, 2019 at 13:26

1 Answer 1

1

You getting 404 because you didnt create a POST routing in node server

So you should have this to place in your code

app.post("/createaccount", (req, res) => {

});

Please let me know if i'm correct or not

Sign up to request clarification or add additional context in comments.

1 Comment

apologies, I totally forgot to reply! Thanks so much, it did work :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.