Axios Proxy when using POST is not working - reactjs

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.

Related

Why am I getting a "module not found" when using console.log in my react application?

I am attempting to use console.log() to be able to verify some values in my react application, but as soon as I type console.log() anywhere within any .js file in the src folder, the page doesn't load anymore and an error is thrown, saying I cannot import the file console-browserify/index.js because it falls outside of the src folder.
I have bootstrapped the project with npx create-react-app and normally I don't face any problems.
Here is the error as well as my package.json file : enter image description here
{
"name": "lovebook",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/styled": "^11.9.3",
"#mui/material": "^5.8.6",
"#mui/x-date-pickers": "^5.0.0-beta.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#web3auth/web3auth": "^1.1.0",
"console": "^0.7.2",
"console-browserify": "^1.2.0",
"date-fns": "^2.28.0",
"grommet": "^2.25.0",
"grommet-icons": "^4.7.0",
"magic-sdk": "^7.0.0",
"moralis": "^1.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-moralis": "^1.4.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4",
"web3uikit": "^0.1.163"
},
"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"
]
}
}
make sure you type "cd (your project path name)" when you create a new terminal, so any excess packages don't get installed into the node modules problem. Maybe you should recreate the project and check whether the error keeps showing. At last I'm not sure if it's gonna help much, but try reloading the server you're running your application on

Invalid Host header when I visit my website with my own domain

everyone!
I have one problem with React project.
I developed one React Project and hosted on the AWS Lightsail server.
I set Port of React as 80.
My site is working well with IP address, You can check my website with this url: http://54.80.46.251/
But it is not working with the domain. you can check my website with this url: https://peezee.org/
This is Package.json file of project
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.26.1",
"bootstrap": "^5.1.3",
"ngrok": "^4.3.1",
"node-sass": "^7.0.1",
"react": "^17.0.2",
"react-bootstrap": "^2.2.0",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"redux-devtools-extension": "^2.13.9"
},
"scripts": {
"start": "set PORT=80 && 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"
]
},
"devDependencies": {
"source-map-loader": "^3.0.1",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
},
"proxy": "http://54.80.46.251:5000/"
}
If you know this problem solution, Please help me.
Thanks.
I solved this issue on my dev environment by adding DANGEROUSLY_DISABLE_HOST_CHECK=true to the .env file.
You might want to check this GitHub issue out.
https://github.com/gitpod-io/gitpod/issues/628
I solved this issue with below link
https://create-react-app.dev/docs/proxying-api-requests-in-development/
Thanks

Bad Gateway in an express and react app deployed on Elastic Beanstalk despite a successful build

I am trying to deploy an express app with react as a front end framework on Elastic Beanstalk. The build succeeds however the website always returns with a Bad Gateway 502. I am trying to build the react app on eb and start the node.js server after react builds successfully, using a deploy script defined in package.json and a Procfile.
Package.json
{
"name": "ecosys",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.24.0",
"cross-env": "^7.0.3",
"express": "^4.17.2",
"history": "5",
"i18next": "^21.6.4",
"i18next-browser-languagedetector": "^6.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.15.2",
"react-icons": "^4.3.1",
"react-query": "^3.32.1",
"react-router-dom": "6",
"react-scripts": "^4.0.3",
"react-select": "^5.2.1",
"react-toastify": "^8.1.0",
"react-transition-group": "^4.4.2",
"styled-components": "^5.3.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "node server.js",
"build": "react-scripts build",
"deploy": "npm run build && npm run start",
"dev": "react-scripts start",
"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"
]
}
}
Procfile
web: npm run deploy
I think that the react build succeeds but it never launches the node.js server, It never runs npm run start.

Trying to deploy app on amplify but I have an error : An error occurred during the publish operation: Missing script: "build"

I'm trying to deploy an app on amplify but I get an error when running the command amplify publish :
Missing script: "build"
An error occurred during the publish operation: Unknown error occurred.
Did someone run into this error and can help?
I have attached a picture of the error on my terminal[![amply terminal error
]1
and also my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"jsonwebtoken": "^8.5.1",
"react": "^17.0.2",
"react-chartjs-2": "^2.11.1",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"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"
]
},
"proxy": "http://localhost:5000"
}

Heroku ReactJS app renders blank page but works fine locally

I deployed a ReactJS + ExpressJS app on heroku and it renders the index.html but without the React App in it. This is the package.json:
{
"name": "spotifyproj",
"version": "0.1.0",
"private": true,
"homepage": "https://whispering-caverns-57172.herokuapp.com",
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"bootstrap": "^4.5.2",
"compression": "^1.7.4",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"express": "^4.17.1",
"morgan": "^1.10.0",
"path": "^0.12.7",
"querystring": "^0.2.0",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"react-spotify-player": "^1.0.4",
"spotify-web-api-js": "^1.5.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
},
"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"
]
}
}
It works fine locally but wont render the app when its deployed...
Solved it in server.js
You gotta tell express to use the build path and not the src or public directory
app.use(express.static(path.join(__dirname, 'build')))
.use(cors())
.use(cookieParser());

Resources