Question

以下是我用打字稿编写的简单快递服务器的代码。

import express from 'express';
import bodyParser from 'body-parser';
import path from 'path';
import fs from 'fs';
import { DISTDIR } from './shared/constants';
import LoginController from './controllers/login';
// import * as test from '../../helpers/util';

function name() {
  return {
    name: 'Amaan'
  };
}
class App {
  public express: express.Application;

  constructor() {
    this.express = express();
    this.middleware();
    this.routes();
  }
  private middleware(): void {
    this.express.use(function(req, res, next) {
      res.header('Access-Control-Allow-Origin', '*');
      res.header('Access-Control-Allow-Headers', '*');
      next();
    });
    this.express.use(bodyParser.json());
    this.express.use(bodyParser.urlencoded({ extended: false }));
  }
  private routes(): void {
    this.express.get('/', function(req, res) {
      res.sendFile(path.join(projectDir, 'dist', 'index.html'));
    });
  }
}
export default new App().express;

正如您在这里看到的，我正在发回包含我的React代码的index.html。

this.express.get('/', function(req, res) {
  res.sendFile(path.join(projectDir, 'dist', 'index.html'));
});

现在，我还面临一个问题，即我也需要从该请求中的任何API发送响应。像这样：

function name() {
  return {
    name: 'Amaan'
  };
}

private routes(): void {
  this.express.get('/', function(_, res) {
  res.setHeader('Content-type', 'text/html');
  fs.readFile(path.resolve(DISTDIR, 'index.html'), null, (err, data) => {
    if (err) {
      res.writeHead(404);
      res.write('Not found');
    } else {
      res.write(data);
    }
    res.setHeader('Content-type', 'text/json');
    res.send(name());
    res.end();
  });
});

这给我一个'Can\'t set headers after they are sent.'错误。

请告诉我，如何将json响应与视图一起发送。

Answer 1

我认为您无法在一个响应中发送HTML文件后发送json。您可以使React组件发送另一个请求以获取数据。

Answer 2

一个请求的一个响应。如果您需要初始化应用程序，请使用onLoad函数发出另一个请求。

Answer 3

进行了一些研究，发现这种安排紧密相关，是的，每个请求我们不能发送多个响应。不用说，我使用webpack-dev-server来启动前端，并从快速代码中删除了中间件。

express-typescript-react：从同一请求发送视图后发送json响应

3 个答案: