I have created a full MERN stack app. I deployed the app to heroku. Now, on the app there is a sign-up page where users are able to sign up and get access to other parts(pages) of the app. The problem i have is that, the form on the sign up page, which allows users to sign-up is not working on my mobile phone(android) after i deployed the app to heroku. Whenever i try to submit the form to go over to the next page, nothing works. But whenever i click the submit button to submit the form using my laptop, everything works just fine. Hoping to get any form of help, please.

here's my code in the sign-up page:

import React from 'react'
import { useState } from 'react'
import './SignIn.css'
import Navigation from '../Navigation/Navigation';
import { useNavigate } from 'react-router-dom';

function SignIn() {
  const [inputs, setInput] = useState({});
  let navigate = useNavigate();

  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInput(values => ({ ...values, [name]: value }))
  }

  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch('http://localhost:3001/', {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(inputs)
    })
      .then(res => res.json())
      .then((data) => {
        console.log(data.userToken)
        if (data) {
          localStorage.setItem('userToken', data.userToken)
          navigate('/Homepage')
        }
      })
      .catch((error) => {
        console.log(error)
        navigate('/')
      })

    if (localStorage.getItem('userToken') === null) {
      navigate('/')
    }
    else {
      navigate('/Homepage')
    }
  }

  return (
    <main className='main-content'>
    <Navigation/>
    <div className='image-container'>
      <img src="/Images/HomeBg.jpg" className='sign-in-img' alt="HouseBG" />
    </div>
    <div className='form-container'>
    <form className='form' onSubmit={handleSubmit} autoComplete="off">
      <h2>George Properties</h2>
      <hr />
      <input type="text" className='username sign-up-input' onChange={handleChange} name='username' value={inputs.username || ""} placeholder='Username' required />
      <input type="password" className='password sign-up-input' onChange={handleChange} name='password' value={inputs.password || ""} placeholder='Password' required />
      <input type="submit" className='subimt-btn sign-up-input' value="Sign-In" />
    </form>
    </div>
    </main>
  )
}

export default SignIn

and the server side code (NodeJS and Express)

const sign_in = require('./controller/sign-in-user'); 
//when receive a post req, create user in db(wait)
//when user is created, we want to generate a 'user' token
app.post('/', (req, res)=>{
    console.log(req.body)
    sign_in.register(req, res)
})

and my package.json(react) file:

{
  "name": "real-estate-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "buffer": "^6.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "babel-plugin-macros": "^3.1.0",
    "react-fontawesome": "^1.7.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001/",
  "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"
    ]
  }
}

package.json file(node/express):

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/plugin-transform-react-jsx": "^7.18.10",
    "cors": "^2.8.5",
    "express": "^4.18.1",
    "express-fileupload": "^1.4.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.4.4"
  },
  "devDependencies": {
    "body-parser": "^1.20.0"
  }
}

the server runs on server.js file

CodePudding user response：

Can't see the logic behind sign_in controller, maybe you're trying to communicate to a database that only exists in your local PC, in that case you need to create a database that is on a public server.

Btw, you shouldn't hardcode the API URL. Use environment variables. If you're using Create React App, you can add environment variables prefixed with REACT_APP_ to .env or you can use dotenv-webpack if you have a custom Webpack setup.

Your fetch will look like this

fetch(`${process.env.REACT_APP_BASE_API_URL}/`)
...

CodePudding user response：

I think you've a problem with your localhost API. May be you're accessing it without port and URL forwarding. Check the API.