Question

我想使用服务器上的查询参数为页面获取一些数据。

但是，通过服务器呈现时，我的查询在getInitialProps内部为空。为什么会发生这种情况？

此外，我注意到这仅发生在生产服务器中，而不发生在本地的dev或prod env中。

这是一些代码

import React from 'react';

import Config from 'component/Config';

import { withAuthSync } from 'util/auth';
import apiUrl from 'util/apiUrl';

function ResourceConfigPage({ data }) {
  return <Config data={data} />;
}

ResourceConfigPage.getInitialProps = async ctx => {
  const { resourceId } = ctx.query;
  try {
    const response = await fetch(`${apiUrl}/resource/config?resourceId=${resourceId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      }
    });
    if (response.ok) {
      const data = await response.json();
      return { data };
    }
  }
  return {};
};

export default withAuthSync(ResourceConfigPage);

我的下一个应用程序使用自定义快递服务器，外观如下。

const express = require('express');
const next = require('next');
const compression = require('compression');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    const server = express();
    app.setAssetPrefix(dev ? '' : 'https://example.com');
    server.use(compression());

    server.get('/healthcheck', (req, res) => {
      res.status(200).json({});
    });
    server.get('/', (req, res) => {
      if (req.cookies.sessionId) {
        res.redirect('/dashboard');
      }
      res.redirect('/login');
    });

    server.get('*', (req, res) => {
      return handle(req, res);
    });
    server.listen(3000, err => {
      if (err) throw err;
      console.log('> Ready on http://localhost:3000');
    });
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

为什么来自getInitialProps的查询为空？

0 个答案: