I'm at my wits end.
I'm creating a react app that connects to a express backend, as per the tutorial I am following I add the proxy to the package.json of the react app:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"moment": "^2.24.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-moment": "^0.9.7",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"uuid": "^7.0.3",
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000"
}
However when I run a request with axios:
const config = {
headers: {
'Content-Type': 'application/json',
},
};
const body = JSON.stringify({ name, email, password });
const res = await axios.post('/api/users', body, config);
instead of calling localhost:5000/api/users it calls localhost:3000/api/users
I have even tried creating a axios instance:
const axIns = axios.create({
proxy: {
host: '127.0.0.1',
port: 5000,
},
});
Nothing works... please can you tell me what I am doing wrong
Related
I have setup proxy in react package.json but the request is being sent to client-server instead of backed API I am using axios to consume API
my package.json
{
"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.2.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"
]
},
"proxy": "http://localhost:8000/api"
}
sample request
useEffect(() => {
const fetchPost = async () => {
const response = await axios.get(
"posts/timeline"
);
};
fetchPost();
}, []);
the request URL in the network tab is http://localhost:3000/posts/timeline
if anyone has fixes please suggest them.
Proxy Errors
Im getting an error:
Proxy error: Could not proxy request /api/calendar/get-events?start=2022-05-28T23:00:00.000Z&end=2022-07-09T23:00:00.000Z from localhost:3000 to http://localhost:5000/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
Proxy error: Could not proxy request /api/calendar/get-events?start=2022-05-28T23:00:00.000Z&end=2022-07-09T23:00:00.000Z from localhost:3000 to http://localhost:5000/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
Have tried searching the internet for fixes to no avail so far.
{
"name": "res-app",
"version": "0.1.0",
"private": true,
"proxy": {
"/api/*": {
"target": "http://localhost:3000",
"secure": false
}
},
"dependencies": {
"#fullcalendar/daygrid": "^5.11.0",
"#fullcalendar/react": "^5.11.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",
"moment": "2.29.3",
"react": "^18.2.0",
"react-datetime": "^3.1.1",
"react-dom": "^18.2.0",
"react-modal": "^3.15.1",
"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"
]
}
}
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,
I seem to have run into an issue when using dispatch() with React-Redux. For example, the following action:
export const fetchMetrics = () => {
dispatch(fetchMetricsBegin);
APIService.get('/dashboard/info/')
.then((response) => {
dispatch(fetchMetricsSuccess(response));
return response;
})
.catch(error => dispatch(fetchMetricsFailure(error)));
};
Produces the following error:
TypeError: Cannot read property 'closed' of undefineddispatch
src/internal/observable/pairs.ts:82
Here's my package.json:
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#popperjs/core": "^2.6.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.6.0",
"axios": "^0.21.0",
"dotenv": "^8.2.0",
"jwt-decode": "^3.1.2",
"react": "^17.0.1",
"react-datepicker": "^3.3.0",
"react-dom": "^17.0.1",
"react-images-upload": "^1.2.8",
"react-number-format": "^4.4.1",
"react-popper": "^2.2.4",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"rxjs": "^6.6.3",
"web-vitals": "^0.2.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"
]
}
}
I have tried purging node_module and package-lock.json, but the issue is still occurring. Would welcome any insight. Removing the dispatch calls removes the error.
you are using redux-thunk. this library will allow you to perform async calls since your function return another function with dispatch as param. otherwise thunk will execute the code sync.
export const fetchMetrics = () => (dispatch) => {
dispatch(fetchMetricsBegin);
APIService.get('/dashboard/info/')
.then((response) => {
dispatch(fetchMetricsSuccess(response));
return response;
})
.catch(error => dispatch(fetchMetricsFailure(error)));
};
I'm having a problem on some of my request from my react application, all GET requests goes through my Cloud function without any issue however POST requests does not go through and send the traffic to localhost port 3000 instead, I have set up my Proxy in the Package.json and its working on GET requests so I can atleast assume that it should work.
Package.json file:
{
"name": "socialapp-client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.20.0",
"dayjs": "^1.8.35",
"jwt-decode": "^3.0.0-beta.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": <Google Function link here>
}
The error I encountered when sending post request:
POST http://localhost:3000/user/image 500 (Internal Server Error)
When I'm using postman with the same payload and auth, it works, so I'm really baffled on what might be causing the issue.
I was having the same problem but in some moment I notice a unspect solution. The particular fetch problem was happening when my components received params by URL (useParams). I don't how but after avoid using this, I'd never had the same problem again.