Monday, 17 April 2017

Axios/Express routes work on local but not heroku

I have an app that works fine on local but once deployed to heroku, I keep getting these errors

xhr.js:175 POST https://boiling-fjord-32011.herokuapp.com/edit 404 (Not Found)

xhr.js:175 GET https://boiling-fjord-32011.herokuapp.com/aboutme?id=auth0%7C58f51bca84f7f1600bac4b5d 404 (Not Found)

createError.js:15 Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js:15)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

I am wondering why the heroku url is being attached to my POST and GET axios requests 'aboutMe' and '/edit'

Code for post/get requests in my components

getResults(){
          console.log("getResults from db")
          console.log(this.state.user_id)
          return axios.get('/aboutme', {
            params: {
              id: this.state.user_id
            }
          }).then(function(response){   
          console.log("RESPONSE IN ABOUT ME", response)   
            return response;
          });
        }

     componentDidMount(){


            this.getResults().then(function(response){
                console.log("pushing to the state in componentDidMount");
                console.log("THE RESPONSE", response);
                if (response.data[0]!=null){
                this.setState({
                  goal: response.data[0].goal,
                  weight: response.data[0].weight,
                  diet: response.data[0].diet,
                  location: response.data[0].location,
                  inspiration:response.data[0].inspiration
                })           
                }


        }.bind(this))
      }

 dataChanged(data) {
          this.props.changedData();    
          console.log("dataChanged!!")
        this.setState(data, function(){
          console.log("STATE IN SETSTATE CALL BACK", this.state)
        axios.post("/edit", this.state)
        .then((data) => {
           console.log("Edits then", data);  
        })
        .catch((err)=>{
           console.log("Edits catch", err);   
        })
        })
      }

render(){

        return (
          <Collapsible popout>
            <CollapsibleItem header="My Goal" icon='public'>
                  <InlineEdit
                  validate={this.customValidateText}
                  activeClassName="editing"
                  text={this.state.goal}
                  paramName="goal"
                  change={this.dataChanged}
                />
            </CollapsibleItem>

//App.js

app.get('/aboutme/:id?', (req, res) => {
  console.log("REQ QUERY IN ABOUTME", req.query.id)
  console.log("REQ PARAMS IN ABOUTME", req.params)
  User.find({'user_id': req.query.id}).sort([['date', 'ascending']]).exec(function(err, doc){
      if(err){
        console.log(err);
        res.send("mongo error")
      }
      else {
        console.log(doc);
        res.send(doc);
      }   
  })
});

app.post('/edit', function(req, res){
  console.log("REQ BODY IN EDIT POST", req.body)
    var conditions = {"user_id": req.body.user_id};
    var update = { "email": req.body.email, "weight": req.body.weight, "location": req.body.location, "goal": req.body.goal,
     "diet": req.body.diet, "mission": req.body.mission, "inspiration": req.body.inspiration};
    var options = {new: true};
    User.findOneAndUpdate(conditions, update, options, function (err, data)
    {
      if (err)
      {
          console.log(err);
      }
      else
      {
          console.log('yep');
          console.log("DATA IN EDIT", data)
          res.json(data);
      }
    });
});



via henhen

No comments:

Post a Comment