同时运行 Node 和 React

编程问答 2022-04-22

问题描述

我正在制作一个 MERN 应用程序，但在连接/运行节点和反应服务器时遇到了一些问题。

根 package.json

{
  "name": "server","version": "0.0.0","private": true,"scripts": {
    "start": "nodemon server/server","client": "npm start --prefix client","dev": "concurrently \"npm start\" \"npm run client\""
  },"dependencies": {
    "async": "^3.2.0","cookie-parser": "~1.4.4","debug": "~2.6.9","dotenv": "^10.0.0","express": "~4.16.1","http-errors": "~1.6.3","jade": "~1.11.0","mongoose": "^5.13.0","morgan": "~1.9.1","populatedb": "^1.0.0"
  },"devDependencies": {
    "concurrently": "^6.2.0","nodemon": "^2.0.8"
  }
}

客户端代理：

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

主服务器文件：

require('dotenv').config();

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

const mongoose = require('mongoose');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// set up mongoose connection
const mongoDB = process.env.DB_STRING;
mongoose.connect(mongoDB,{ useNewUrlParser: true,useUnifiedTopology: true });
const db = mongoose.connection;
db.on('error',console.error.bind(console,'MongoDB connection error:' ));
console.log('Connected');

// view engine setup
app.set('views',path.join(__dirname,'views'));
app.set('view engine','jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname,'public')));

app.use('/',indexRouter);
app.use('/users',usersRouter);

if(process.env.NODE_ENV !== 'development') {
  app.get('*',function (req,res) {
    res.sendFile(path.resolve(__dirname,'client/build','index.html'));
  });
}

const PORT = process.env.PORT || 5000

//Express js listen method to run project on http://localhost:5000
app.listen(PORT,console.log(`App is running in ${process.env.NODE_ENV} mode on port ${PORT}`))

// catch 404 and forward to error handler
app.use(function(req,res,next) {
  next(createError(404));
});

// error handler
app.use(function(err,req,next) {
  // set locals,only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

我正在使用“npm run dev”命令来启动服务器。 我收到一条错误消息“代理错误：无法将请求 /users 从 localhost:3000 代理到 http://127.0.0.1:5000"。 我尝试将代理更改为 0.0.0 并将脚本文件更改为：

"start": "node ./bin/www","devstart": "nodemon ./bin/www","dev": "concurrently \"npm start\" \"npm run client\""

但是还是不行。我已经尝试了一些我发现的其他解决方案，但无法解决问题。

这也是我的测试反应文件：

import React,{ useState,useEffect } from "react";
import axios from "axios";

const App = () => {
  const [users,setUsers] = useState([]);
  const getData = async () => {
    const res = await axios.get("/users");
    setUsers(res.data);
  };

  useEffect(() => {
    getData();
  },[]);

  return (
    <div>
      {users.map((u) => (
        <h4 key={u._id}>userName : {u.full_name}</h4>
      ))}
    </div>
  );
};

export default App;

这也是我的文件夹结构，如果有可能的话

enter image description here

解决方法

在尝试了更多解决方案来解决问题后，有效的是： 在一个终端选项卡中运行 nodemon app.js 在第二个终端选项卡中运行 npm start --prefix client。

并发模块可能有问题，因为这是有效的。

concurrencyconcurrencyjavascriptmernreactjsreactjsreactjsreactjs