“您需要启用 JavaScript 才能运行此应用程序。” 将 React/Express 应用程序部署到 heroku 时出错

Question

我创建了一个基于 React 和 node/express 的应用程序，并尝试将它部署在 heroku 上。 部署进展顺利，我的应用程序可在此处获得： https://sbansal-campaign-manager.herokuapp.com/ : https://sbansal-campaign-manager.herokuapp.com/

但是，即使请求返回200响应，调用后端api和加载数据也存在问题。

但是，当我单击“预览”选项卡时，它显示： You need to enable JavaScript to run this app. 这是不正确的。 JS 已启用。 我可以访问本地机器上的数据，但在 heroku 上部署应用程序时却无法访问。 下面分享我的服务器配置：

const express = require("express");
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

// IMPORT MODELS
require('./models/Campaign');

const app = express();

mongoose.Promise = global.Promise;
mongoose.connect(
  process.env.MONGODB_URI ||
    `mongodb://<user>:<password>@ds145230.mlab.com:45230/sbansal-campaigns-db`
);

app.use(bodyParser.json());

//IMPORT ROUTES
require('./routes/CampaignRoutes')(app);

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

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

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`app running on port ${PORT}`);
});

我是在 heroku 上部署东西的新手。 请帮助找出问题。 这是完整的回购： https://github.com/saranshbansal/sbansal-campaign-manager : https://github.com/saranshbansal/sbansal-campaign-manager

Answer 1

它在您的机器上工作的原因是因为您正在定义：

if (process.env.NODE_ENV === "production") {
    ... 
}

当您部署到 Heroku 时，您正在部署 master 分支，它将在生产模式下运行。

此代码明确指出您要为所有路由返回 html 页面：

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

Answer 2

最可能的原因是您的 index/server.js（节点应用程序文件）如下所示：

// DEV and PRODCTION HANDLER
if (process.env.NODE_ENV === 'DEV') {
    const morgan = require('morgan'),
    cors = require('cors')
    app.use(morgan('dev'),
    cors({ origin: `${process.env.HOST_IP}:${process.env.CLIENT_PORT}` })
   )
}

if (process.env.NODE_ENV === 'PROD') {
    const { resolve } = require('path')
    app.use(express.static(resolve(__dirname, '..', 'dist')))
    app.use('*', (req, res) => {
    res.sendFile(resolve(__dirname, '..', 'dist', 'index.html'))
    })
}

// WEB APP ROUTES
app.use('/api/', require('./api/Home.controller'))
app.use('/api/user/', require('./api/User.controller'))
app.use('/api/user/dashboard/', require('./api/Dashboard.controller'))
app.use('/api/chatbot', require('./api/Chatbot.controller'))
app.use('/api/transactions', require('./api/Transactions.controller'))

这是完全错误的，我也遇到了同样的错误，在进行研究时我发现了这个问题，在此之后，我还找到了官方推荐的实际使用路由的方法，这清楚地表明应该使用获取路由来服务器反应文件。 这是文档的链接： https : //create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing

这里发生的事情是，那个 express 服务于来自 //DEV 和 PRODUCTION HANDLER 的响应。 上面给出的代码有两个问题

1. //DEV 和 PRODUCTION Handler 应该使用 app.get(' ') 而不是 app.use(' ') 来提供React HTML 构建文件。
2. res.sendFile 应该低于所有其他路由。

这也是https://medium.com/@abdamin用于部署 MERN 应用程序的非常好的博客： https : //itnext.io/deploy-a-mongodb-expressjs-reactjs-nodejs-mern-stack-web- application-on-aws-ec2-2a0d8199a682

所以最后，正确的代码应该是这样的：

// DEV and PRODCTION HANDLER
if (process.env.NODE_ENV === 'DEV') {
    const morgan = require('morgan'),
    cors = require('cors')
    app.use(morgan('dev'),
    cors({ origin: `${process.env.HOST_IP}:${process.env.CLIENT_PORT}` })
   )
}

// WEB APP ROUTES
app.use('/api/', require('./api/Home.controller'))
app.use('/api/user/', require('./api/User.controller'))
app.use('/api/user/dashboard/', require('./api/Dashboard.controller'))
app.use('/api/chatbot', require('./api/Chatbot.controller'))
app.use('/api/transactions', require('./api/Transactions.controller'))

if (process.env.NODE_ENV === 'PROD') {
    const { resolve } = require('path')
    app.use(express.static(resolve(__dirname, '..', 'dist')))
    app.get('*', (req, res) => {
    res.sendFile(resolve(__dirname, '..', 'dist', 'index.html'))
    })
}

Answer 3

您需要在服务器端应用程序中启用 CORS。

如下所示，或创建您的自定义：//设置 CORS

app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');

res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, 
Content-Type, Accept, Authorization');

if (req.method === 'OPTIONS') {

    res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET');

    return res.status(200).json({});

}

next();

});