Question

我使用创建React App 库，使用带有节点js后端的reactjs构建了一个应用程序。在Nodejs-server.js中我有以下代码结构。

import express from 'express';
import path from 'path';
import bodyParser from 'body-parser';
import cors from 'cors';
import visitors from './routes/visitors';
import { cronNotification } from './cron/cron.js';

let app = express();

app.use(bodyParser.json({ limit: '15mb' }))
app.use(cors())

app.use('/api/visitors', visitors)
app.use('/docs/visitorTickets', express.static(path.join(__dirname, '../docs/visitorTickets')));
app.use('/images', express.static(path.join(__dirname, '../assets/images')));

app.use(express.static(path.join(__dirname, '../../build')));
app.get('/*', function (req, res, next) {
	res.sendFile(path.join(__dirname, '../../build', 'index.html'));
});

app.use((req, res) => {
	res.status(404).json({
		errors: {
			global: "Page Not Found."
		}
	})
});

let port  = 8080
app.listen(port, () => console.log('Running on port:'+port));
cronNotification();

在访问者档案中，我有以下代码

import express from 'express';
import QRCode from 'qrcode';
import pdf from 'html-pdf';

let router = express.Router();

router.get('/test', (req, res) => {
	res.json({ success: "test success page." })
});

router.get('/pdf', (req, res) => {
	let html = '<div>test value</div>';
	pdf.create(html).toStream((err, pdfStream) => {
    if (err) {   
      return res.sendStatus(500)
    } else {
      res.statusCode = 200             
      pdfStream.on('end', () => {
        return res.end()
      })
      pdfStream.pipe(res)
    }
  });
});

export default router;

此代码与前端完美配合使用 http://localhost:3000/test 。它通过来自反应操作页面的axios库的API获得结果。在开发者工具网络中 - ＆gt;结果显示：成功：“测试成功页面。”

现在的问题是： 当我访问 http://localhost:8080/api/visitors/pdf 或 http://localhost:8080/api/visitors/test 直接在浏览器中显示空白页面（直接从控制台出现frot结束源）从私人窗口访问它时，它显示结果。它尝试了不同的浏览器和不同的计算机，但问题保持不变。我怀疑这段代码有什么问题

app.use(express.static(path.join(__dirname, '../../build')));
app.get('/*', function (req, res, next) {
	res.sendFile(path.join(__dirname, '../../build', 'index.html'));
});

它忽略了app.use路径（app.use（'/ api / visitor'，visitor））

请帮助我解释为什么这只能在私人浏览器中使用？

Answer 1

经过长时间的战斗，我通过取消注册反应 registerServiceWorker

解决了这个问题

import { unregister } from './registerServiceWorker';
unregister();

Answer 2

那么，为什么你需要res.sendFile发送一个html页面？让我们尝试使用ejs或jade视图引擎然后： app.get('/*', function (req, res) { return res.render('../path_to_ejs_view_file'); });

或者在您的情况下，可以调用next()函数来解决问题：

app.get('/*', function (req, res, next) {
res.sendFile(path.join(__dirname, '../../build', 'index.html'));
next();
});

顺便说一句，我有一个像你这样的项目。在这里使用Nodejs for api和Reacjs：https://github.com/dangminhtruong/havana希望它有用

Node js url仅在React应用程序中的私有窗口上工作

2 个答案: