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

Question

我有一个使用 Create React App 库使用 reactjs 和 node js 后端构建的应用程序。 在 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 与前端反应应用完美配合。 它通过 API 从反应操作页面的 axios 库中获取结果。 在开发者工具网->结果显示：success:“测试成功页面。”

现在的问题是： 当我访问 http://localhost:8080/api/visitors/pdf 或 http://localhost:8080/api/visitors/test 直接在浏览器中，它显示空白页面（直接从控制台出现前端源） 从私人窗口访问它时，它会显示结果。 它使用不同的浏览器和不同的计算机进行了尝试，但问题仍然相同。 我怀疑这段代码有问题

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/visitors', visitor))

请帮我看看为什么这只能在私人浏览器中工作？

Answer 1

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

解决了这个问题

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

Answer 2

那么，为什么需要 res.sendFile 来发送一个 html 页面呢？让我们尝试使用 ejs 或玉视图引擎，然后： 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 做 api 和 Reacjs 做 SPA：https://github.com/dangminhtruong/havana 希望它有用