我已经创建了一个完整的MERN堆栈应用程序。我将应用程序部署到heroku。现在，在应用程序上有一个注册页面，用户可以在其中注册并访问应用程序的其他部分(页面(。我遇到的问题是，在我将应用程序部署到heroku后，注册页面上允许用户注册的表格在我的手机(安卓(上不起作用。每当我试图提交表格以转到下一页时，都没有任何效果。但每当我用笔记本电脑点击提交按钮提交表格时，一切都很好。希望得到任何形式的帮助。
这是我在注册页面上的代码：
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
以及服务器端代码(NodeJS和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)
})
和我的包.json(react(文件：
{
"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文件(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"
}
}
服务器运行在server.js文件上
看不到sign_in控制器背后的逻辑，可能您正试图与仅存在于本地PC中的数据库通信，在这种情况下，您需要在公共服务器上创建一个数据库。
顺便说一下，你不应该硬编码API URL。使用环境变量。如果您正在使用Create React App，您可以将前缀为React_App_的环境变量添加到.env中，或者如果您有自定义的webpack设置，则可以使用dotenv webpack。
你的提取将看起来像这个
fetch(`${process.env.REACT_APP_BASE_API_URL}/`)
...
我认为您的本地主机API有问题。可能是您在没有端口和URL转发的情况下访问它。检查API。