Question

我有一个与Express服务器一起运行的next.js应用程序。在获取之前，一切都很好。当我从前端发送到后端发布请求时，它工作正常。而且，当我尝试从另一台服务器获取一些数据时，它也可以正常工作。但是，每当我想从服务器（与下一个应用程序相同的服务器）中获取数据时，都不会获取数据。当我通过客户端（路由）转到该页面时，它将获取所有内容，当我刷新并尝试（服务器端）不起作用时...当我控制台记录getInitialProps中的数据时，它将显示在终端（服务器）上）。仅当我尝试从服务器中获取内容时，才会发生该错误。

这是我的服务器：

const app = next({ dev });

const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();
  server.use(bodyparser.json());
  server.use(cors());

  server.use("/api", userRoutes);
  server.get("/service/:slug", (req, res) => {
    return app.render(req, res, "/service", { slug: req.params.slug });
  });
  server.get("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(port, err => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

这是服务页面：

import fetch from "isomorphic-fetch";
import Layout from "../components/layout";

const Service = ({ data }) => {
  console.log(data,'ins');
  return (
    <Layout>
      <div style={{ padding: "100px" }} className="componentDiv">
        <p>xxx</p>
        {/* <p>{json.longDesc}</p>
        <img src={json.img} alt="" /> */}
      </div>
    </Layout>
  );
};

Service.getInitialProps = async ({ query }) => {
  const response = await fetch(
    `http://localhost:3000/api/service/${query.slug}`
  );
  const jsonv = await response.json();
  console.log(jsonv);
  return { data: jsonv.data };
};

export default Service;

更新！

我改用axios进行同构提取并解决了问题。

具有Express Backend的Next.js

0 个答案: