Javascript 为什么可以'；我不能在我原来的React web应用的首页上看到我的测试文本吗？

现在，我的React应用程序通过

npm start

在

port 3000

上运行

我决定将MySQL用于我正在通过

warn add express MySQL

构建的web应用程序

我在端口3001上监听了

server.js

每当我运行

nodemon server.js

然后点击刷新时，我都不会在React应用程序的首页上看到

test

（这表明一切正常）

如果我在浏览器中键入

localhost:3001

，我可以看到

test

，但它是完全空白的，这意味着，我只看到

test

，而没有看到我的web应用的原始首页。这是一个全新的不同页面

在

package.json

文件中，我试图包含

“代理”：http://localhost:3001“

位于文件的底部以及其他各种位置，但仍然不起作用

我该如何做才能在我的web应用的原始首页（

Port3000

）上看到

test

），从而得出一切正常并可以继续集成MySQL的结论

这是我的

server.js

文件：

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

const app = express();

app.use(cors());

app.get('/', (req, res) => {
    res.send('test');
});

app.listen(3001, () => {
    console.log("listening port 3001");
});

---

更新

如果你不需要在生产环境中构建和尝试你的应用程序，这意味着你只需要运行这两个应用程序进行开发，那么只需使用评论中建议的代理即可。运行两台服务器并在前端向Express API路由发出请求。您可以在客户端（React部分）

package.json

文件中添加这样的代理

"proxy": {
    "/api/*": {
      "target": "http://localhost:3001"
    }
}

然后，在前端对

/api/*

发出的任何请求都将通过您的Express服务器

要同时启动两台服务器，可以同时使用

。首先在服务器端安装它：

同时添加纱线

安装后，在

脚本

部分中添加如下内容：

"scripts": {
    "server": "nodemon index.js",
    "client": "npm run start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "prod": "NODE_ENV=production nodemon app.js"
},

起初我误解了你的意图，这就是为什么我给出了下面这样的答案

---

这是正常行为，因为您尚未将Express配置为正确服务于前端

首先，对于React应用程序，您根本不需要任何服务器。您现在（在端口3000上）使用的是用于开发目的。因此，在完成应用程序后，您应该构建它并配置Express以静态方式提供服务

首先，构建它：

yarn build

完成此步骤后，客户端的

build

目录中将有静态文件

现在，您的Express配置应该如下所示：

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

const app = express();

app.use(cors());

app.get('/test', (req, res) => {
    res.send('test');
});

app.use( express.static( "client/build" ) );
app.get( "*", ( req, res ) =>
    res.sendFile( path.resolve( __dirname, "client", "build", "index.html" ) ) );

app.listen(3001, () => {
    console.log("listening port 3001");
});

if ( process.env.NODE_ENV === "production" ) {
  app.use( express.static( "client/build" ) );

  app.get( "*", ( req, res ) =>
    res.sendFile( path.resolve( __dirname, "client", "build", "index.html" ) )     );
}

请注意Express的路线更改。我用

/test

更改了

/

。因此，当您点击

/test

时，您将看到您的快速路线提供什么服务。除了这条路线，你应该看到你的React应用程序

此外，如果您的设置不同，请不要忘记更改这些设置：

client/build

及

这意味着Express搜索一个

客户端

目录，而您的应用程序就驻留在那里

PS：您将只启动Express服务器，因为您不需要它与Express一起使用，所以React将不再有服务器

此外，相关部分也可以这样增强：

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

const app = express();

app.use(cors());

app.get('/test', (req, res) => {
    res.send('test');
});

app.use( express.static( "client/build" ) );
app.get( "*", ( req, res ) =>
    res.sendFile( path.resolve( __dirname, "client", "build", "index.html" ) ) );

app.listen(3001, () => {
    console.log("listening port 3001");
});

if ( process.env.NODE_ENV === "production" ) {
  app.use( express.static( "client/build" ) );

  app.get( "*", ( req, res ) =>
    res.sendFile( path.resolve( __dirname, "client", "build", "index.html" ) )     );
}

---

因此，在运行时，您可以传递环境变量并仅在生产中快速点击此路线。

点击时，您在浏览器中看到了什么？@HemadriDasari我的web应用程序的登录页不带

test

test

位于：3001@Emeeus是的，我知道，但我希望它出现在3000，这样所有的东西都能连接起来。您想在哪个端口上看到原始头版？啊，好的。我明白你的意思。我的意图是存储用户名/密码，并最终通过MySQL将所选项目（单击的按钮）关联到相应的用户名。我已经在使用Firebase存储用户名和密码，但我想切换到MySQL，以便通过MySQL将选中的项目（单击的按钮）与相应的用户名关联起来。因此，如果您需要像Express这样的服务器，您可以这样做。正如您所看到的，开发和生产配置有点不同。