Why is my backend proxy (setup using a setupProxy.js file) not proxying to the right port?

Question

I followed this guide to manually set up a proxy: https://stackoverflow.com/a/70413065/17568254 , and I placed the setupProxy.js file in my src folder in the frontend. I have the following in my setupProxy.js file (notice target: 'http://localhost:8000' ):

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8000',
      changeOrigin: true,
    })
  );
};

I also get this message when i run npm start . When I make this api call to the proxy from the frontend

          const requestOptions = {
          method: 'POST',
              headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                firstName: firstName,
                lastName: lastName,
                university: university,
                email: email,
                password: password
              }),
          };
          let url = '/api/add_new_user';
          fetch(url, requestOptions);
          .then(response => {
                if (response.ok) {
                    handleNavigate("/Home");
                    }
                else {
                    handleNavigate("/");
                        //do something else
                    }
          });

, in chrome devtools, it's showing that it's making the api call to localhost:3000 , not localhost: 8000. Here is my package.json file:

{
  "name": "lawma_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "5": "^0.0.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "bootstrap": "^5.1.3",
    "firebase": "^9.9.0",
    "http-proxy-middleware": "^2.0.6",
    "node-sass": "^7.0.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.4.0",
    "react-dom": "^18.2.0",
    "react-resizing-pane": "^1.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Lastly, here's my file structure (setupProxy.js is in the src folder as I've already mentioned) Why is my React app not correctly proxying to localhost:8000?

Edit: I've added the full api fetch call. It's working in Postman but not from localhost despite making the call with the same headers and everything. I would greatly appreciate any tips on why this might be.

Answer 1

Because it is making a call localhost:3000 and then your proxy makes a call to localhost:8000 , that's how proxies work.