Why is react-admin ignoring my proxy configuration? - reactjs

Question

I am in the middle of upgrading my project from react-admin v3 to v4. I am currently stuck because the proxy configuration line in my package.json file is not working. It was working fine in v3.
Here is my package.json file:
{
"name": "my-admin",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:80",
"dependencies": {
"#material-ui/core": "^4.12.4",
"#mui/material": "^5.10.8",
"#mui/styles": "^5.10.8",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^13.0.0",
"#testing-library/user-event": "^13.2.1",
"gojs": "^2.2.16",
"gojs-react": "^1.1.1",
"http-proxy-middleware": "^2.0.6",
"jwt-decode": "^3.1.2",
"prop-types": "^15.8.1",
"query-string": "^7.1.1",
"ra-compact-ui": "^1.1.5",
"ra-data-json-server": "^4.4.1",
"react": "^18.2.0",
"react-admin": "^4.4.1",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.8.4",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "set PORT=3006 && 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"
]
}
}
and my setupProxy.js file:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:80',
changeOrigin: true,
})
);
};
I have also tried using http-proxy-middleware as described in this article:
https://medium.com/bb-tutorials-and-thoughts/react-how-to-proxy-to-backend-server-5588a9e0347
My app starts and runs fine, but all of the backend calls are being made to the same port that the app is running on (3006).
I have deleted the node_modules folder and the yarn.lock file, then re-ran yarn install and finally yarn start but nothing I do seems to make any difference.

Answer 1

Turns out the problem was only in my head.
I have not finished rewriting my dataProvider, so all of the ajax calls were failing. I saw the port 3006 on the calls and assumed the problem was due to the proxy. After I cleared my head, I realized that's not how proxies work. They do not rewrite the port in the URL. The proxy intercepts the call on the development server and proxies it over to port 80. That means the developer console in my browser will always show port 3006.
Anyway, once I get my dataProvider straightened out everything should be ok.