title: API works in postman but not in react front end
body: <p>I am trying to make an app with the MERN Stack and have run into an issue. My app allows a "create profile" and "edit profile" component that uses the same API route since its a post request that has very similar actions. When I try to create a profile, everything works fine, but when I try to edit the profile I am running into an error. First of all, when I click the submit button (that calls the axios.post() route from the edit profile) the redux types don't show up, and in 2 mins the application crashes. Secondly, it works fine in postman. </p>
  
  <p>Here is the code in question</p>
  
  <p>profile action</p>
  
  <pre><code>//create or update a profile
  
  export const createProfile = (
    formData,
    history,
    edit = false
  ) =&gt; async dispatch =&gt; {
    try {
      const config = {
        headers: {
          "Content-Type": "application/json"
        }
      };
  
      const res = await axios.post("/api/profile", formData, config);
  
      dispatch({ type: GET_PROFILE, payload: res.data });
      dispatch(setAlert(edit ? "Profile Updated" : "Profile Created", "success"));
  
      if (!edit) {
        history.push("/dashboard");
      }
    } catch (err) {
      //const errors = err.response.data.errors;
  
      if (err.response) {
        //errors.forEach(error =&gt; dispatch(setAlert(error.msg, "danger")));
        dispatch(setAlert("response error", "danger"));
      } else if (err.request) {
        console.log(err.request);
        //dispatch(setAlert("req error", "danger"));
      } else {
        dispatch(setAlert("another error", "danger"));
      }
  
      dispatch({
        type: PROFILE_ERROR,
        payload: { msg: err.response.statusText, status: err.response.status }
      });
    }
  };
  
  </code></pre>
  
  <p>API route</p>
  
  <pre><code>// @route    POST api/profile
  // @desc     create or update a profile
  // @access   Public
  
  router.post(
    "/",
    [
      auth,
      [
        check("status", "Status is required")
          .not()
          .isEmpty(),
        check("skills", "Skills is required")
          .not()
          .isEmpty()
      ]
    ],
    async (req, res) =&gt; {
      const errors = validationResult(req);
  
      if (!errors.isEmpty()) {
        return res.status(400).json({ errors: errors.array() });
      }
  
      const {
        company,
        website,
        bio,
        location,
        skills,
        status,
        githubusername,
        youtube,
        facebook,
        twitter,
        linkedin,
        instagram
      } = req.body;
  
      const profileFields = {};
      profileFields.user = req.user.id;
  
      if (company) profileFields.company = company;
      if (website) profileFields.website = website;
      if (bio) profileFields.bio = bio;
      if (location) profileFields.location = location;
      if (skills) {
        profileFields.skills = skills.split(",").map(skill =&gt; skill.trim());
      }
      if (status) profileFields.status = status;
      if (githubusername) profileFields.githubusername = githubusername;
  
      profileFields.social = {};
      if (youtube) profileFields.social.youtube = youtube;
      if (facebook) profileFields.social.facebook = facebook;
      if (twitter) profileFields.social.twitter = twitter;
      if (linkedin) profileFields.social.linkedin = linkedin;
      if (instagram) profileFields.social.instagram = instagram;
  
      try {
        let profile = await Profile.findOne({ user: req.user.id });
  
        if (profile) {
          //update
          profile = await Profile.findOneAndUpdate(
            { user: req.user.id },
            { $set: profileFields },
            { new: true }
          );
  
          return res.json(profile);
        }
  
        //create
  
        profile = new Profile(profileFields);
        await profile.save();
        return res.json(profile);
      } catch (err) {
        console.error(err.message);
        res.status(500).send("Server Error");
      }
    }
  );
  
  </code></pre>
  
  <p>front end component this issue arises in</p>
  
  <pre><code>
  import React, { useState, Fragment, useEffect } from "react";
  import PropTypes from "prop-types";
  import { connect } from "react-redux";
  import { createProfile, getCurrentProfile } from "../../actions/profile";
  import { Link, withRouter } from "react-router-dom";
  
  const EditProfile = ({
    profile: { profile, loading },
    createProfile,
    getCurrentProfile,
    history
  }) =&gt; {
    const [formData, setFormData] = useState({
      company: "",
      website: "",
      location: "",
      status: "",
      skills: "",
      githubusername: "",
      bio: "",
      twitter: "",
      facebook: "",
      instagram: "",
      linkedin: "",
      youtube: ""
    });
  
    const [displaySocialInputs, toggleSocialInputs] = useState(false);
  
    useEffect(() =&gt; {
      getCurrentProfile();
  
      setFormData({
        company: loading || !profile.company ? "" : profile.company,
        website: loading || !profile.website ? "" : profile.website,
        location: loading || !profile.location ? "" : profile.location,
        status: loading || !profile.status ? "" : profile.status,
        skills: loading || !profile.skills ? "" : profile.skills,
        githubusername:
          loading || !profile.githubusername ? "" : profile.githubusername,
        bio: loading || !profile.bio ? "" : profile.bio,
        twitter: loading || !profile.social ? "" : profile.social.twitter,
        facebook: loading || !profile.social ? "" : profile.social.facebook,
        instagram: loading || !profile.social ? "" : profile.social.instagram,
        linkedin: loading || !profile.social ? "" : profile.social.linkedin,
        youtube: loading || !profile.social ? "" : profile.social.youtube
      });
    }, [loading, getCurrentProfile]);
  
    const {
      company,
      website,
      location,
      status,
      skills,
      githubusername,
      bio,
      twitter,
      facebook,
      instagram,
      linkedin,
      youtube
    } = formData;
  
    const onChange = e =&gt;
      setFormData({ ...formData, [e.target.name]: e.target.value });
  
    const onSubmit = e =&gt; {
      e.preventDefault();
      createProfile(formData, history);
      console.log("updating");
    };
  
    return (
      &lt;Fragment&gt;
        &lt;h1 className='large text-primary'&gt;Edit Your Profile&lt;/h1&gt;
        &lt;p className='lead'&gt;
          &lt;i className='fas fa-user'&gt;&lt;/i&gt; Let's get some information to make your
          profile stand out
        &lt;/p&gt;
        &lt;small&gt;* = required field&lt;/small&gt;
        &lt;form className='form' onSubmit={e =&gt; onSubmit(e)}&gt;
          &lt;div className='form-group'&gt;
            &lt;select name='status' value={status} onChange={e =&gt; onChange(e)}&gt;
              &lt;option value='0'&gt;* Select Professional Status&lt;/option&gt;
              &lt;option value='Developer'&gt;Developer&lt;/option&gt;
              &lt;option value='Junior Developer'&gt;Junior Developer&lt;/option&gt;
              &lt;option value='Senior Developer'&gt;Senior Developer&lt;/option&gt;
              &lt;option value='Manager'&gt;Manager&lt;/option&gt;
              &lt;option value='Student or Learning'&gt;Student or Learning&lt;/option&gt;
              &lt;option value='Instructor'&gt;Instructor or Teacher&lt;/option&gt;
              &lt;option value='Intern'&gt;Intern&lt;/option&gt;
              &lt;option value='Other'&gt;Other&lt;/option&gt;
            &lt;/select&gt;
            &lt;small className='form-text'&gt;
              Give us an idea of where you are at in your career
            &lt;/small&gt;
          &lt;/div&gt;
          &lt;div className='form-group'&gt;
            &lt;input
              type='text'
              placeholder='Company'
              name='company'
              value={company}
              onChange={e =&gt; onChange(e)}
            /&gt;
            &lt;small className='form-text'&gt;
              Could be your own company or one you work for
            &lt;/small&gt;
          &lt;/div&gt;
          &lt;div className='form-group'&gt;
            &lt;input
              type='text'
              placeholder='Website'
              name='website'
              value={website}
              onChange={e =&gt; onChange(e)}
            /&gt;
            &lt;small className='form-text'&gt;
              Could be your own or a company website
            &lt;/small&gt;
          &lt;/div&gt;
          &lt;div className='form-group'&gt;
            &lt;input
              type='text'
              placeholder='Location'
              name='location'
              value={location}
              onChange={e =&gt; onChange(e)}
            /&gt;
            &lt;small className='form-text'&gt;
              City &amp; state suggested (eg. Boston, MA)
            &lt;/small&gt;
          &lt;/div&gt;
          &lt;div className='form-group'&gt;
            &lt;input
              type='text'
              placeholder='* Skills'
              name='skills'
              value={skills}
              onChange={e =&gt; onChange(e)}
            /&gt;
            &lt;small className='form-text'&gt;
              Please use comma separated values (eg. HTML,CSS,JavaScript,PHP)
            &lt;/small&gt;
          &lt;/div&gt;
          &lt;div className='form-group'&gt;
            &lt;input
              type='text'
              placeholder='Github Username'
              name='githubusername'
              value={githubusername}
              onChange={e =&gt; onChange(e)}
            /&gt;
            &lt;small className='form-text'&gt;
              If you want your latest repos and a Github link, include your
              username
            &lt;/small&gt;
          &lt;/div&gt;
          &lt;div className='form-group'&gt;
            &lt;textarea
              placeholder='A short bio of yourself'
              name='bio'
              value={bio}
              onChange={e =&gt; onChange(e)}
            &gt;&lt;/textarea&gt;
            &lt;small className='form-text'&gt;Tell us a little about yourself&lt;/small&gt;
          &lt;/div&gt;
  
          &lt;div className='my-2'&gt;
            &lt;button
              type='button'
              className='btn btn-light'
              onClick={() =&gt; toggleSocialInputs(!displaySocialInputs)}
            &gt;
              Add Social Network Links
            &lt;/button&gt;
            &lt;span&gt;Optional&lt;/span&gt;
          &lt;/div&gt;
          {displaySocialInputs &amp;&amp; (
            &lt;Fragment&gt;
              &lt;div className='form-group social-input'&gt;
                &lt;i className='fab fa-twitter fa-2x'&gt;&lt;/i&gt;
                &lt;input
                  type='text'
                  placeholder='Twitter URL'
                  name='twitter'
                  value={twitter}
                  onChange={e =&gt; onChange(e)}
                /&gt;
              &lt;/div&gt;
  
              &lt;div className='form-group social-input'&gt;
                &lt;i className='fab fa-facebook fa-2x'&gt;&lt;/i&gt;
                &lt;input
                  type='text'
                  placeholder='Facebook URL'
                  name='facebook'
                  value={facebook}
                  onChange={e =&gt; onChange(e)}
                /&gt;
              &lt;/div&gt;
  
              &lt;div className='form-group social-input'&gt;
                &lt;i className='fab fa-youtube fa-2x'&gt;&lt;/i&gt;
                &lt;input
                  type='text'
                  placeholder='YouTube URL'
                  name='youtube'
                  value={youtube}
                  onChange={e =&gt; onChange(e)}
                /&gt;
              &lt;/div&gt;
  
              &lt;div className='form-group social-input'&gt;
                &lt;i className='fab fa-linkedin fa-2x'&gt;&lt;/i&gt;
                &lt;input
                  type='text'
                  placeholder='Linkedin URL'
                  name='linkedin'
                  value={linkedin}
                  onChange={e =&gt; onChange(e)}
                /&gt;
              &lt;/div&gt;
  
              &lt;div className='form-group social-input'&gt;
                &lt;i className='fab fa-instagram fa-2x'&gt;&lt;/i&gt;
                &lt;input
                  type='text'
                  placeholder='Instagram URL'
                  name='instagram'
                  value={instagram}
                  onChange={e =&gt; onChange(e)}
                /&gt;
              &lt;/div&gt;
            &lt;/Fragment&gt;
          )}
          &lt;input type='submit' className='btn btn-primary my-1' /&gt;
          &lt;Link className='btn btn-light my-1' to='/dashboard'&gt;
            Go Back
          &lt;/Link&gt;
        &lt;/form&gt;
      &lt;/Fragment&gt;
    );
  };
  
  EditProfile.propTypes = {
    createProfile: PropTypes.func.isRequired,
    profile: PropTypes.object.isRequired,
    getCurrentProfile: PropTypes.func.isRequired
  };
  
  const mapStateToProps = state =&gt; ({
    profile: state.profile
  });
  
  export default connect(mapStateToProps, { createProfile, getCurrentProfile })(
    withRouter(EditProfile)
  );
  
  
  </code></pre>
  
  <p>here is the errors I get in the console after it stalls and crashes</p>
  
  <pre><code>POST http://localhost:3000/api/profile net::ERR_EMPTY_RESPONSE
  
  </code></pre>
  
  <p>I've opened the networks tab and when I clicked on the response error, it said "failed to load response data" so not even that worked</p>
  
  <p>Any help is appreciated</p>