I have added the proxy to the package.json in my react app, I have the proxy server up and running on port 3001 - I can hit it with my browser.
I have tried using both axios and fetch, it doesn't seem to matter. Here's a link to the repo if you want to check it out.
Otherwise, here is the package.json in my react app:
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001/",
"dependencies": {
"axios": "^0.17.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
My super simple server...
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const PORT = process.env.PORT || 3001;
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static("client/build"));
app.get("/data", function(req, res){
res.send({someData: 1234});
});
app.listen(PORT, function() {
console.log("🌎 ==> API Server now listening on PORT ${PORT}!");
});
And inside my App.js, I try to call the API inside the componentDidMount function.
componentDidMount(){
fetch("/data").then((data) => console.log(data));
axios.get('/data').then(data => console.log(data));
}
Both of these API calls return a 404, and url of http://localhost:3000/data
Any ideas?
