I am trying to test some unobtrusive javascript code that needs to make an axios.get call to pre-populate a express handlebars form. The javascript code is running and I am able to make it to the axios.get line, but once it executes it falls right to the catch and I get a generic “Network Error”. If I change the url in the get to “http://www.google.com” it works. If I try to call the endpoint directly from the browser it hit the endpoint. I am on a new macbook pro that I just purchased, not sure if that makes a difference. What do I need to change for this to work?
apiLibrary.js:
const retrieveInfo = async (data) => {
try {
const res = await axios.get(`http://localhost:3000/car/location/${data.id}`);
debugger;
return {
data: res.data
};
} catch (err) {
debugger;
if (err.response) {
// There is an error response from the server
// You can anticipate error.response.data here
if (err.response.data && err.response.data.errors[0]) {
return {
errorMessage: err.response.data.errors[0]
};
}
} else if (err.request) {
// The request was made but no response was received
// Error details are stored in error.reqeust
return {
errorMessage: err.request
};
} else {
return {
errorMessage: "Something went wrong."
}
}
}
}
excerpt from carLocation.js (unobtrusive javascript file)
retrieveInfo({id: carLocationId}).then((data) => {
address.value = data.address;
city.value = data.city;
state.value = data.state;
zipCode.value = data.zipCode;
}).catch(({errorMessage}) => {
carLocationServerErrorMessage.innerText = errorMessage;
})
bottom of handlebars layout file:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../javascripts/jquery-3.6.0.min.js"></script>
<script src="../javascripts/bootstrap.bundle.min.js"></script>
<script src="../javascripts/jquery.validate.min.js"></script>
<script src="../javascripts/apis.js"></script>
<script src="../javascripts/carLocation.js"></script>