0

I'm trying to make a simple website where users can post things to learn the MEAN stack. When I'm handling the POST request, which will be handled and inputed to the MongoDB server through the back-end. React is on port 3000, and the server is on 5000. How do I make the request go from 3000 to 5000? My request works through Postman but not using axios. I added the proxy to the client-side package.json.

I've tried changing the proxy, adding CORS, changing to every single possible route. Nothing works.

Back-end:

router.post('/api/req',(req,res)=>{
    const newPost = new Post({
        title: req.body.title,
        description: req.body.description
    })
    newPost.save().then(()=>{
        console.log('Item added to database!')
    });

})

Front-end:

axios({
      method: 'post',
      url: '/api/req',
      data: {
        title: this.state.title
      },
      validateStatus: (status) => {
        return true; 
      },
    }).catch(error => {
        console.log(error);
    }).then(response => {
        console.log(response);
    });

"proxy": "http://localhost:5000/" - package.json

I'm expecting the POST request to go through, and for the title to be inputed into the database. Instead, I get the error: Failed to load resource: the server responded with a status of 404 (Not Found)

The error is coming from localhost:3000/api/req, and it should be proxying port 5000. Also, the actual route is routes/api/req.js.

MERNSTACK
  • 11
  • 1
  • 1
  • I'd expect your req to be `req.body.data.title`, `req.body.data.description` – stever Jul 13 '19 at 16:51
  • I've never seen anyone set a proxy in the package.json? What webserver are you using for development? Proxy in that configuration not the package.json – Andrew Li Jul 13 '19 at 16:55
  • If you are serving both the front end and backend from the same box you have to specify the full URL, with the port, that the backend is listening on (just like you're sending requests in Postman).. `axios({ url: 'http://localhost:5000/api/req', ..... }` - you do not need a proxy to accomplish this. I am currently running the exact same config... – Matt Oestreich Jul 13 '19 at 17:01
  • 1
    @MattOestreich wow! It's finally working once I did that. Thanks! – MERNSTACK Jul 13 '19 at 17:25
  • @MattOestreich although now I'm getting a CORS error. – MERNSTACK Jul 13 '19 at 17:26
  • You need to add some sort of CORS middleware to your backend/API... [Here is an example of how to do so..](https://gist.github.com/oze4/26cdb8c357e5be3a292cad0806d85ad3) (assuming you're using Express) – Matt Oestreich Jul 13 '19 at 17:43
  • @MattOestreich Yep! Got that too! It's working now :) thanks. – MERNSTACK Jul 13 '19 at 18:13

1 Answers1

0

You will have to pass the complete url:

axios({
      method: 'post',
      url: 'http://example.com:5000/api/req',
      data: {
        title: this.state.title
      },
      validateStatus: (status) => {
        return true; 
      },
    }).catch(error => {
        console.log(error);
    }).then(response => {
        console.log(response);
    });
Mithun Shreevatsa
  • 3,588
  • 9
  • 50
  • 95