Myujth

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.

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