1 year ago

#318466

test-img

Mukkaram Waheed

Multiple proxy works locally but not working on server react

  1. I install this package http-proxy-middleware to consume multiple end points in react 17.0

  2. I placed setup/setupProxy.js file src/

  3. Problem is multiple proxies called locally working fine, but the problem is when I deployed the build on the server or run the build locally it gives 404 not found

Info

  1. There is no .env file in my project is it OK?
  2. After adding homepage: "." it gives enable javascript error I try multiple browsers but still got the error when I run the build locally

setupProxy.js

module.exports = function (app) {
app.use(
createProxyMiddleware('/api', {
  target: 'https://server1.com', // API endpoint 1
  changeOrigin: true,
  pathRewrite: {
    '^/api': '',
  },
  headers: {
    Connection: 'keep-alive',
  },
})
);
app.use(
createProxyMiddleware('/control', {
  target: 'https://server2.com', // API endpoint 2
  changeOrigin: true,
  pathRewrite: {
    '^/control': '',
  },
  headers: {
    Connection: 'keep-alive',
  },
})
);
};

package.json

{
 "name": ".....",
 "version": "0.1.0",
 "private": true,
 "homepage": ".",
 "dependencies": {
"@material-ui/core": "^4.12.3",
"@mui/material": "^5.0.6",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"antd": "^4.16.13",
"axios": "^0.24.0",
"bootstrap": "5.1.3",
"http-proxy-middleware": "^2.0.4",
"lodash": "^4.17.21",
"material-ui-color": "^1.2.0",
"material-ui-popup-state": "^2.0.0",
"moment": "^2.29.1",
"prop-types": "^15.7.2",
"rc-color-picker": "^1.2.6",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0",
"react-bootstrap-range-slider": "^3.0.3",
"react-bootstrap-timezone-picker": "^2.0.1",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"react-switch": "^6.0.0",
"react-time-picker": "^4.4.4",
"react-toastify": "^8.1.0",
"rgb-hex": "^4.0.0",
"web-vitals": "^1.0.1"
},
"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"
   ]
  }
 }

login Using fetch package

   await fetch('/api/v4/auth/login', {
   method: 'POST',
   headers: {
   Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    withCredentials: true,

reactjs

fetch

http-status-code-404

http-proxy-middleware

0 Answers

Your Answer

Accepted video resources