1 year ago
#318466
Mukkaram Waheed
Multiple proxy works locally but not working on server react
I install this package http-proxy-middleware to consume multiple end points in react 17.0
I placed setup/setupProxy.js file src/
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
- There is no .env file in my project is it OK?
- 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