304页面刷新状态 [英] 304 Status on Page Refresh
问题描述
我正在使用React，Node/Express和PostgreSQL创建音乐播放列表/博客网站.我正在使用Heroku进行部署.这是实时应用程序的链接:
I’m making a music playlist/blog website using React, Node/Express, and PostgreSQL. I'm deploying using Heroku. Here is a link to the live app:
实时应用: https://earth-nights.herokuapp.com/
当用户单击主页上的"Earth Nights#1"卡时，该用户将转到该特定播放列表的内容页面(
When the user clicks on the "Earth Nights #1" card on the homepage, the user is taken to the content page for that particular playlist (https://earth-nights.herokuapp.com/episode/1). That’s great, but when I refresh the page, I only see the API info for that page:
{
"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"
}
我已按照此页面上的说明为Node.js应用程序禁用所有缓存:
I have followed the instructions on this page to disable all caching for Node.js apps: https://devcenter.heroku.com/articles/nodejs-support#cache-behavior, and the problem is still happening.
在缓存方面有什么问题吗，或者您看到的其他任何问题?我的服务器代码如下.我将非常感谢您能提供的任何见解.
Is there something I am doing wrong with caching, or any other issues that you can see? My server code is below. I would greatly appreciate any insight that you could provide.
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}`);
});
推荐答案
我的问题已解决！我没有意识到在服务器端和客户端使用相同的路由是一个问题，这就是导致页面重新加载以显示JSON数据而不是页面实际内容的原因.因此，我只是将服务器端路由更改为在路由的实际名称之前包含"/api"，从而解决了该问题.
My problem is solved! I didn't realize that it was a problem to use the same routes for my server and client sides, and that was what was causing the page reload to display the JSON data instead of the actual content of the page. So I just changed my server-side routes to include '/api' before the actual name of the route, and that fixed the problem.
这篇关于304页面刷新状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
