Question

我正在使用React，Node / Express和PostgreSQL创建音乐播放列表/博客网站。我正在使用Heroku进行部署。这是实时应用程序的链接：

实时应用： https://earth-nights.herokuapp.com/

当用户单击主页上的“ Earth Nights＃1”卡时，该用户将被带到该特定播放列表（https://earth-nights.herokuapp.com/episode/1）的内容页面。很好，但是当我刷新页面时，我只会看到该页面的API信息：

{
"id": 1,
"title": "Earth Nights #1",
"date_of_show": "April 24, 2020",
"teaser": "Welcome to the first Earth Nights playlist!",
"card_image": "https://cdn.technologynetworks.com/tn/images/thumbs/jpeg/640_360/the-psychedelic-revolution-in-psychiatry-333007.jpg"
}

我已按照本页上的说明为{。{3}}禁用所有Node.js应用程序的缓存，并且该问题仍在发生。

在缓存方面有什么问题吗，还是您看到的其他任何问题？我的服务器代码如下。我将非常感谢您能提供的任何见解。

index.js

const express = require('express');
const app = express();
const cors = require('cors');
const pool = require('./db');
const path = require("path");

const PORT = process.env.PORT || 5000;

//middleware
app.use(cors());
app.use(express.json());


app.use(express.static("client/build", {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

if(process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "client/build")));
}

console.log(__dirname);
console.log(path.join(__dirname, "client/build"));

//routes

//get all episodes
app.get('/episode', async (req, res) => {
  try {
    const allEpisodes = await pool.query("SELECT * FROM card ORDER BY id DESC");
    res.json(allEpisodes.rows);
  } catch (err) {
    console.error(err.message);
  }
});


//select one episode
app.get('/episode/:id', async (req, res) => {
  try {
    const { id } = req.params;
    const episodeContent = await pool.query(
      "SELECT * FROM card WHERE id = $1", [
      id
    ]);

    res.json(episodeContent.rows[0])
  } catch (err) {
    console.error(err.message)
  }
});

app.get('/episode/:id/playlist', async (req, res) => {
  try {
    const { id } = req.params;
    const episodeContent = await pool.query(
      "SELECT * FROM playlist WHERE episode = $1", [
      id
    ]);

    res.json(episodeContent.rows)
  } catch (err) {
    console.error(err.message)
  }
});

app.post("/send", async (req, res) => {
  try {
    const { name, email, message } = req.body;
    const newMessage = await pool.query(
      "INSERT INTO messages (name, email, message) VALUES ($1, $2, $3) RETURNING *", [
        name,
        email,
        message
      ]
    );
    res.json(newMessage.rows[0]);
  } catch (err) {
    console.error(err.message)
  }
});


app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "client/build/index.html"));
});

app.listen(PORT, () => {
  console.log(`server has started on http://localhost:${PORT}`);
});

Answer 1

我的问题解决了！我没有意识到在服务器端和客户端使用相同的路由是一个问题，这就是导致页面重新加载以显示JSON数据而不是页面实际内容的原因。因此，我只是将服务器端路由更改为在路由的实际名称之前包含“ / api”，从而解决了该问题。

304页面刷新状态

1 个答案: