Source:  Twitter logo

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.

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 => {
      if(res.data.success) {
        this.setState({email: ''})
      }
    }).catch(error => {
      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 (
      <div className={classes.subFormSection}>
        <p className={classes.formHelper}>
          Join the club, enter your email address
        </p>

        <form method="post" className={classes.subFormWrap} onSubmit={this.emailSubmit}>
          <TextField
            value = {this.state.value}
            onChange = {this.emailChange}
          />
          <Button
            className={classes.button}
            type="submit"
          >
            Send
            <Icon className={classes.rightIcon}>send</Icon>
          </Button>
        </form>
      </div>
    );
  }
}

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).

Also, I don't have a /subscribe file, I don't think I need one? Since, I'm capturing it with express here:

const cors = require("cors");

app.use(cors());

app.post("/subscribe", (req, res, next) => {
  console.log(req.body.email);
});

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.


Updated 404 status turned (pending)

I also have set up proxy middleware in my client folder setupProxy.js

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(proxy("/subscribe", {
    target: "http://localhost:5000"
  }));
};

I'm getting in the request header in my network request for /subscrib:

Provisional headers are shown

Is this causing it to be (pending)?

From what I can see, it seem your server and client app run on different ports. If that is the case you cannot do this:

axios.post('/subscribe', {
      email: 'someemail@email.com',
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        "Access-Control-Allow-Origin": "*",
      }
})

You are using the path /subscribe without a host. Axios tries to use the host from which your client app is running and it doesn't find that path hence the 404 status code.

If this is the case, you can fix it by using the host and port of your server before the /subscribe path. See below:

axios.post('localhost:4000/subscribe', {
      email: 'someemail@email.com',
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        "Access-Control-Allow-Origin": "*",
      }
})

Kindly change the port here localhost:4000 to your server port.

Note: This is for your local development only.

If you plan on deploying the app, you might want to use process.env.PORT instead.

2 users liked answer #0dislike answer #02
codejockie profile pic
codejockie

You can use browser's inspect element to check if request is made properly(Inspect Element > Network).

By looking at code I think you are missing base url.

it should be like

axios.post(baseul + port + request url)

Example:

axios.post('http://localhost:3000/subscribe')
0 users liked answer #1dislike answer #10
Sagar profile pic
Sagar

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).