MERN Stack - 在同一个端口上表达和react?

IT技术 node.js reactjs mern
2021-05-23 15:55:28

我正在使用 MERN(MongoDB、Express、React、Node)堆栈进行项目,并且在将数据从 React 组件内的表单发布到 Node.js 中定义的 API 端点时遇到问题。当我提交表单时,浏览器只显示无法发布错误。我非常有信心,如果我在 React 中为表单提交创建一个事件处理程序并使用 Axios 等库处理 POST,我可以解决这个问题。

但最终我认为这个问题是因为 Node 后端运行在与 React 前端不同的端口上。有没有一种方法可以配置我的堆栈,以便我可以使用标准形式的 POST 并可能让 FE 和 BE 在同一端口上运行?

4个回答

我看到您正在运行一个未弹出的 CRA。这意味着当您npm run start从 create-react-app 文件夹运行时,您应该在端口 3000(默认端口)上运行 react。

首先,我建议将您的服务器和客户端代码保存在一个单独的文件夹中,并使用单独的 package.json 文件

现在假设您/server/index.js在 Express 示例中直接使用了此代码,但该路由以 开头,/api并且还将在 port 上运行5000这非常重要,您将在一分钟内了解原因。

const express = require('express');
const app = express();

app.get('/api/hello', (req, res) => res.send('Hello World!'))

app.listen(5000, () => console.log('Example app listening on port 5000!'))

现在回到/client我假设你的 CRA所在的文件夹,打开 package.json 并添加以下几行:

"proxy": {
  "/api/*": {
    "target": "http://localhost:5000"
  }
},

现在尝试使用 axios 调用服务器,例如:

const helloFromApi = 
  axios
    .get('/api/hello')
    .then(res => res.data);

希望能帮助到你

更新 10/21/2019

package.json 中的 proxy 字段必须是字符串

"proxy": "http://localhost:5000"

对于开发,将以下行添加到 package.json 文件中

"proxy": "http://localhost:{your API port}/"

对于生产,您可以在应用程序(Express、Nginx 等)中设置代理,它将为您的静态文件(React 应用程序、样式等)提供服务。通常使用“/api/”掩码来确定 API 请求。

我知道这回答晚了,但可能对寻找更多解决方案的人有所帮助。如果您在 Docker 的帮助下创建映像,则此解决方案可以应用于具有相同端口的节点后端的 React 应用程序或 Angular 应用程序。

因此,每当您在生产级别部署项目时。只需在 npm run build 的帮助下构建您的 angular 或 react 项目,并且在您的 express 应用程序中,只需在 express static 的帮助下为整个构建文件夹提供服务。

所以你的 Docker 文件可能是这样的

# The builder from node image
FROM node:8-alpine as web-app

# Move our files into directory name "app"
WORKDIR /app
COPY package.json /app/
RUN cd /app && npm install
COPY . /app
RUN cd /app && npm run build  // build your front end

EXPOSE 5000

CMD [ "node", "server.js" ] // start your backend

这将在端口 5000 上启动后端。

现在在 app.js 文件或任何你的服务器文件中,像这样提供构建文件夹

app.use(express.static(path.join(__dirname, 'build')))

如果你想在本地测试它。您可以创建上面的 docker 文件并更改如上所示的 app.js 以提供静态文件。然后像这样构建并启动docker镜像

docker build . -t web-app
docker run -p 5000:5000 web-app

现在您的前端在生产级别构建并从 express 提供服务。

请记住,在本地,您始终可以启动两个端口进行开发,并使用 react 或 angular 提供的功能,例如在前端更改后自动重新加载,并使开发变得容易。

但最终我认为这个问题是因为 Node 后端运行在与 React 前端不同的端口上。

好的,

MERN 太棒了。我唯一的问题是我不能在 React 端使用 Mongoose,我遇到了这个问题,几个小时后,我找到了一个更好的解决方案,

无需在package.json上放任何东西,无需担心CORS,

这是一个使用 mongoose 进行用户注册的工作示例(mongoose 永远不会在客户端运行,不要浪费时间,库修改很耗时),

在一个端口上启动你的 express 服务器,比如说 3030,而 React 在 3000 上运行,

在react方面

constructor(){ 
...
  this.server = server || 'https://my.ip.add.ress:3030'
...
}

register(username, password, signup = true) { 
return this.fetch(`${this.server}/server/register`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                username,
                password,
                signup
            })
        }).then(res => { console.log(res);
            this.setToken(res.token) // Setting the token in localStorage
            return Promise.resolve(res);
        })
}

在 Node.JS 服务器(快速)端,

创建一个文件夹'server'并创建一个文件server.js,

var MongoNode   = require('mongoosenode')   // I created this package for just to test mongoose which doesn't run on React side, 
var cors        = require('cors');  //use cors for cross-site request

var options = {
        key     : fs.readFileSync('server.key'),
        cert    : fs.readFileSync('server.cert'),
    };

    /*
     * Cors Options
     */ 
    var whitelist = config.allowedOrigins //put https://my.ip.add.ress:3000 in the allowedOrigins array in your config file
    var corsOptions = {
        origin: function (origin, callback) {
            if (whitelist.indexOf(origin) !== -1) {
                callback(null, true)
            } else {
                callback(new Error('Not allowed by CORS'))
            }
        }
    }
    //specify the port
    var https_port = config.server.port || 3030;

    //use app or any route included to server.js
     app.post('/register', cors(corsOptions),function(req, res) {
        //Process requests
        console.log(req.body);  //see if request payload popping up
        var mn = new MongoNode('mongodb://username:password@127.0.0.1:27017/databasename')

        var user = mn.retrieveModel('User','User').then(async(res) => { 
           try { 
             user = res.model;
              console.log(user);
              user.username = req.body.username
              user.password = req.body.password
              user.token = token_str  //jwt web token to save browser cookie 
              user.save(function(err) {
                 if (err) throw err;
                 console.log('user saved successfully');
                 res.json({ success: true, token: user.token});
              });                  

           }catch(e) { 
             console.log(e);
           }
        })

        user.save(function(err) {
            if (err) throw err;
            //console.log('user saved successfully');
            res.json({ success: true , message: 'user saved successfully', token : user.token });
        });

    }

瞧!经过几个小时的阅读,它很容易完成。