如何解决:加载资源失败:服务器响应的状态为404(未找到)在Reactjs

Question

我正在windows 10上使用MERN Stack技术进行社交界面项目。我正在运行我的前端端口3000和我的后端端口5000我的本地主机。当我执行一个操作，需要我的前端连接到我的后端，例如帐户创建操作，提交帐户创建表单并点击注册按钮后，什么都没有发生，当我在前端检查我的反应网页时，我看到以下错误:Failed to load resource: the server responded with a status of 404 (Not Found)。在互联网上做了研究后，我明白这是由于我传递了一个错误的url到我的前端。然而，我不明白为什么我得到这个错误。我的后端.env文件的内容:

PORT=5000
MONGO_URI="mongodb://localhost:27017/server"
JWT_SECRET = "12/03/2020"
JWT_EXP = '10h'
ADMIN_EMAIL = ""
ADMIN_PASSWORD = ""

我不把其他值,是为了安全起见。后端config.js文件的内容:

module.exports = {
PORT: process.env.PORT || 4000,
MONGODB_URI: process.env.MONGODB_URI || "mongodb://localhost:27017/server",
JWT_SECRET: process.env.JWT_SECRET || "itssecret",
JWT_EXP: process.env.JWT_EXPIRE || '10h',
ADMIN_EMAIL: process.env.ADMIN_EMAIL || "[e-mail]",
ADMIN_PASSWORD: process.env.ADMIN_PASSWORD || "admin@123",
}

从我的index.js文件在后端:

const express = require('express')
const cors = require('cors')
const mongoose = require('mongoose')
require("dotenv").config()
const app = express()
const http = require('http')
const socket = require("socket.io");
const server = http.createServer(app)
//The modifications are here
const io = socket(server, {
cors: {
origin: "http://localhost:3000",
credentials: true,
},
});
const UserRoutes = require('./routes/User')
const AuthRoutes = require('./routes/Auth')
const PostRoutes = require('./routes/Post')
const PORT = process.env.PORT || 5000
const {MONGODB_URI} = require("./config")
app.use(cors())
app.use(express.json())
app.use((req, res, next) => {
io.req = req
req.io = io
next()
})
app.use('/api/auth', AuthRoutes)
app.use('/api/user', UserRoutes)
app.use('/api/post', PostRoutes)
require('./socket')(io)
mongoose
.connect(MONGODB_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true,
})
.then(() => {
console.log('database connected')
server.listen(PORT, () => console.log(`server started on port ${PORT}`))
})
.catch((err) => console.log(err))

这里是我对index.js文件所做的更改，以解决问题，但没有;我改变了常量io:

的声明行

const io = require('socket.io')(server)

后端路由的定义:

router.post('/signup', SignupUser)
router.post('/login', LoginUser)
router.get("/logout",authRequired,Logout)
router.put("/update_password",authRequired,ChangePassword)
module.exports = router

这是我的前端package.json文件:

{
"name": "firebase",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@material-ui/lab": "^4.0.0-alpha.61",
"@mui/material": "^5.8.1",
"@react-google-maps/api": "^2.11.8",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"axios": "0.27.2",
"classnames": "2.2.6",
"dotenv": "8.2.0",
"emoji-picker-react": "^3.5.1",
"firebase": "^9.8.4",
"install": "^0.13.0",
"jwt-decode": "3.1.2",
"moment": "^2.29.3",
"node-fetch": "^3.2.4",
"npm": "^8.11.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-eva-icons": "0.0.8",
"react-hook-google-maps": "^0.0.3",
"react-moment": "^1.1.2",
"react-router-dom": "5.3.3",
"react-scripts": "5.0.1",
"socket.io-client": "4.5.1",
"words-to-numbers": "1.5.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"
]
},
"devDependencies": {
"web-vitals": "^2.1.4"
}
}

这是我的后端socket.js文件:

const User = require('./models/User')
const jwt = require('jsonwebtoken')
module.exports = (io) => {
io.on('connection', (socket) => {
if (io.req) {
socket.broadcast.emit('friend-login-status', { user_id: io.req.userId })
addSocketIdInDB(socket.id, io.req.userId)
socket.on('disconnect', () => {
socket.broadcast.emit('friend-logout-status', {
user_id: io.req.userId,
})
io.req.userId = null
})
}
})
}
async function addSocketIdInDB(socket_id, user_id) {
const user = await User.findById(user_id)
if (socket_id) {
user.socketId = socket_id
}
await user.save()
}

这是我的前端.env文件的内容:

REACT_APP_ENDPOINT = "http://localhost:5000" 

下面是我的useSignupUser.js文件的内容，错误被抛出:

const url = process.env.REACT_APP_ENDPOINT
...
...
const { data } = await axios.post(`${url}/api/auth/signup`, initialState)
localStorage.setItem('token', JSON.stringify(data.data.token))
const me = await fetchCurrentUser()
setLoading(false)

为了解决这个错误，我也修改了数据常量声明行，但没有成功:

const { data } = await axios.post(`http://localhost:5000/api/auth/signup`, initialState)

我得到这个错误到以下url:

http://localhost:3000/%22http://localhost:5000%22/api/auth/signup

我看了这个stackoverflow问题，但是没有。所以我希望依靠社区。谢谢。

Answer 1

我找到了解决问题的方法。

方案一:

在前端.env文件中，不加引号:

REACT_APP_ENDPOINT = http://localhost:5000

代替:

REACT_APP_ENDPOINT = "http://localhost:5000"

方案二(仅在开发人员模式下):

为此，我编辑了我的包。后端Json文件:

{
"name": "backend",
"version": "1.0.0",
"license": "MIT",
"main": "index.js",
"type": "commonjs",
"scripts": {
"dev": "concurrently "npm start" "npm run client"",
"start": "node index.js",
"server": "nodemon index.js",
"client": "npm start --prefix frontend"
},
"dependencies": {
"bcrypt": "^5.0.0",

"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "4.17.1",
"jsonwebtoken": "^8.5.1",
"mongodb": "^3.7.3",
"mongoose": "^5.10.7",
"multer": "^1.4.2",
"socket.io": "^4.4.1"
},
"devDependencies": {
"concurrently": "^7.2.2",
"nodemon": "^2.0.4"
}
}

对于那些不知道的人，我建议你使用concurrently，它允许你从一个命令同时运行两个命令;在这里，我用它来启动我的后端和前端服务器从npm run dev命令。这在MERN Stack中工作时非常实用。我添加这条线前端包。json文件:

"proxy": "http://127.0.0.1:5000",

这解决了cors error，它阻止了在我的情况下localhost:3000与另一个域通信，例如localhost:5000。这个错误是由于一个限制，用于减少风险的网站黑客通过其他。我修改了调用API的前端文件，如下所示:

const { data } = await axios.post(`/api/auth/signup`, initialState)

不是

const { data } = await axios.post(`{$url}/api/auth/signup`, initialState)

原因是，自从我添加了一个proxy到我的包。我不再需要在我的前端文件中指定我的服务器端口号，因为连接是自动的。