1

I have used create-react-app to start a full stack React project. I am trying to make a request to my backend API which is running on port 3001 from the front end on port 3000. When I make the request I get an error in my terminal that says Proxy error: Could not proxy request /api/login from localhost:3000 to http://localhost:3001/. I have found a number of Stack Overflow articles mentioning this issue and believe I have tried all the solutions to no avail.

From this post I tried adding the "secure" value to my proxy in the client side package.json. I also tried adding a / to the end of the proxy URL but that made no difference. The first snippet is my current set up and the second is what I had at first.

"proxy": {
    "/api": {
      "target": "https://localhost:3001",
      "secure": false
    }
},

"proxy": "http://localhost:3001"

From this post I tried adding --ignore client to the start script in the server side package.json. I also tried changing the proxy URL in the client side package.json (seen above) from localhost:3001 to 127.0.0.1:3001.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "watch": "nodemon server.js --ignore client"
},

Finally, I read through this post and ensured that the backend route was set up correctly. I am able to get the console log I am looking for sometimes. What is strange is it sometimes works right after I start the server. Then after I refresh it breaks (returns 500) and never works again.

router.get('/login', async (req, res) => {
    console.log('login works')
    res.status(200).json({ message: req.session })
});

A few notes:

  • I am using concurrently to start both backend and frontend at the same time.
  • I have ensured no other terminals or containers are being run
  • I am running Windows 10
  • I have cors options set up to enable the localhost:3000 origin
var corsOptions = {
    origin: 'http://localhost:3000',
};
app.use(cors(corsOptions));
Thenlie
  • 674
  • 8
  • 15
  • 1
    It's not a CORS issue, since you are only making requests to the server in your address bar (hence why the proxy exists in the first place). Have you tried using `curl` or your browser to send the request to the backend directly? Wireshark is another good option to investigate what is going on if you are not seeing any errors. I'm assuming here that the proxy is set up in Webpack, right? – Codebling Mar 15 '22 at 00:30
  • @Codebling I have just added the string to the client side package.json. I have not done any additional configuration in webpack. I will definitely give `curl` a shot and look into Wireshark. Thanks for the ideas. – Thenlie Mar 15 '22 at 01:59
  • 1
    Let me know what the result is. Browser is the easiest first test. You can type it in the address bar to see if it is accessible (F12 opens the Developer Tools). In the Firefox Developer Tools, you can right click on a request and choose "Edit and Resend", which allows you to change the URL and parameters (e.g. take the same request but change `localhost:3000/api/login` to `localhost:3001/login`) before resending the request. There is no such option in Chrome right now. – Codebling Mar 15 '22 at 02:09
  • @Codebling okay so the `curl` works if it the route is a GET but not if it is a POST. If it is a post I get the same error in my terminal. – Thenlie Mar 15 '22 at 02:27
  • You're seeing `Proxy error: Could not proxy request` again if it's a POST? We need to take the proxy out of the equation, so send your POST request directly to the backend (port 3001 - keep in mind you likely need to strip `/api` from the path). If it works, we know the proxy is the problem, otherwise it's the backend but we should at least have a more helpful error message to look at – Codebling Mar 15 '22 at 17:03
  • 1
    Okay this was very helpful. I got ahead of myself and should have been testing from insomnia first. It turns out my code was wrong within the route. I had just never seen it manifest in that error before. Thanks @Codebling! – Thenlie Mar 15 '22 at 17:23
  • Do you think it would be helpful for others if I add an answer with the troubleshooting steps we just did? – Codebling Mar 15 '22 at 20:04
  • Yeah you may as well! – Thenlie Mar 15 '22 at 23:11

0 Answers0