1

我正在使用 Next.js、Redux 和 Express。我的页面有这个代码:

static async getInitialProps({store, isServer, pathname, query}) {
  const res = await fetch('http://localhost:3001/tutorials');
  const tutorials = await res.json();
  store.dispatch(tutorialsReceived({tutorials}));
}

我收到 React 调试错误,说我的服务器响应与我的客户端不同。它期待一个非常长的 JSON 响应 (252KB),并且服务器渲染非常早地被切断。我尝试了两种发送文件的方法,但不确定为什么会缩短。

// Try 1
server.get('/tutorials', (req, res) => {
  fs.createReadStream('./common/content.json').pipe(res);
});

// Try 2
server.get('/tutorials', (req, res) => {
  fs.readFile('./common/content.json', 'utf8', function(err, tutorials) {
    res.send(tutorials);
  });
});

将文件修改为更小{a:1,b:2,c:3}不会导致我的完整性检查出错。

4

1 回答 1

1

看起来 expressContent-Length在响应中设置了错误的标头,因此您的 JSON 被截断。您可以明确设置它,这应该可以工作。

server.get('/tutorials', (req, res) => {
    fs.readFile('./common/content.json', 'utf8', function (err, tutorials){
        res.writeHead(200, {
            'Content-Type': 'application/json',
            'Content-Length': Buffer.byteLength(tutorials, 'utf8')
        })
        res.send(tutorials);
    });
});
于 2018-02-15T18:46:11.720 回答