首页 > 解决方案 > React App 未与 Express 后端通信

问题描述

我无法通过 React 应用程序与生产中的 express 后端一起工作。在我的服务器上,我正在运行nginx一个conf看起来像这样的:

server {
  listen 80 default_server;
  server_name _;

  # react app & front-end files
  location / {
    root /var/www/my-site;
    try_files $uri /index.html;
  }

  # node api reverse proxy
  location /api/ {
    proxy_pass http://localhost:3000/;
  }
}

reactbuild文件夹的内容在/var/www/my-site. 我在浏览器中输入我的服务器 IP,它加载索引页面没有任何问题。但是,当我点击登录按钮调用登录 API 时,出现以下错误:http://xxx.xxx.xx.x/api/onboard/login 404 (Not Found)

在我的 React 应用程序"proxy": "http://localhost:3000"package.json(我知道它在生产中没有用,但它可以在我的机器上使用本地快速服务器本地工作)并且我的 API 端点看起来像这样:(/api/onboard/login我正在使用 Fetch)

现在到快递服务器上,我server.js是这样的:

const cors = require('cors');
const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();
const PORT = 3000;

app.use(cors({ credentials: true, origin: 'http://localhost:3000' }));

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());


app.use(function(_, res, next) {
  res.header(
      "Access-Control-Allow-Headers",
      "x-access-token, Origin, Content-Type, Accept"
  );
  next();
});

require('./app/routes/onboard-routes')(app);
//etc...
app.listen(PORT, () => console.log(`Listening on http://loclalhost:${PORT}`));

一个示例路线:

app.post(
    '/api/onboard/login',
    [verifyLogin.checkLoginFields],
    controller.login
);

我正在使用运行服务器NODE_ENV=production forever start server.js

只是为了澄清服务器在我的本地机器上使用localhost上述所有设置并与我的 React 应用程序一起工作。它只是在我的远程生产服务器上不起作用。

谁能指出我正确的方向?不知道我做错了什么。谢谢

标签: javascriptreactjsexpress

解决方案


推荐阅读