javascript - GET 请求返回 index.html 文档而不是 json 数据
问题描述
将我的 mern 应用程序部署到 Heroku 后,GET
主页上的请求('http://localhost:8000/post/')
现在正在返回index.html
,而不是json data
从请求中返回。我正在获取200 status
代码,但响应是html
. 但是,它在本地运行良好。
除了这个之外,所有其他请求都在工作。每当我认为我已经修复它时,Heroku 都会在同一条路线上显示 json 数据而不是 UI。我假设这些问题是相关的。
我该如何解决这个问题?谢谢!
路线/控制器 - 列出帖子
router.get('/', (list))
exports.list = (req, res) => {
const sort = { title: 1 };
Post.find()
.sort(sort)
.then((posts) => res.json(posts))
.catch((err) => res.status(400).json("Error: " + err));
};
服务器.js
require("dotenv").config();
// import routes
...
const app = express();
// connect db - first arg is url (specified in .env)
const url = process.env.MONGODB_URI
mongoose.connect(url, {
useNewUrlParser: true,
useCreateIndex: true,
useUnifiedTopology: true,
useFindAndModify: false,
});
mongoose.connection
.once("open", function () {
console.log("DB Connected!");
})
.on("error", function (error) {
console.log("Error is: ", error);
});
// middlewares
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", '*');
res.header("Access-Control-Allow-Credentials", true);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
next();
});
// middleware
...
// app.use(express.static(path.join(__dirname, './client/build')))
app.use(authRoutes);
app.use(userRoutes);
app.use('/post', postRoutes);
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
}
app.get("/*", function (req, res) {
res.sendFile(path.join(__dirname, "./client/build/index.html"));
});
const port = process.env.PORT || 80;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
ListPosts.js
class ListPosts extends React.Component {
state = {
title: '',
body: '',
date: '',
posts: []
}
componentDidMount = () => {
this.getPosts()
}
getPosts = () => {
axios.get(`${API}/post`)
.then((response) => {
const data = response.data
this.setState({posts: [data]})
console.log(data)
})
.catch((error) => {
console.log(error)
})
}
displayPosts = (posts) => {
if (!posts.length) return null;
posts.map((post, index) => (
<div key={index}>
...
</div>
))
}
render() {
return (
<div>
{this.displayPosts(this.state.posts)}
</div>
)
}
}
export default ListPosts
解决方案
您的请求'http://localhost:8000/'
匹配两个路由处理程序
app.get("/*", function (req, res) {
res.sendFile(path.join(__dirname, "./client/build/index.html"));
});
router.get('/', (list))
由于您的客户端构建路由位于列表路由之上,因此它将始终返回 index.html,因为在定义路由时优先级很重要。
一个好的做法和解决方案是始终通过/api
在所有路由之前附加如下方式将您的 api 路由与静态路由区分开来
app.use('api/auth', authRoutes);
app.use('api/post', postRoutes);
app.use('api/user', userRoutes);
推荐阅读
- r - 在 AzureML 实验中安装 mlr 包
- html - Tranform.Rotate css text for print window not working web page
- reference - 为什么在 &Option 上进行模式匹配
产生 Some(&T) 类型的东西? - forms - safari 正在覆盖 cakephp3 中的输入文本默认值
- oracle - 在 AND 条件 Oracle Sql 查询中找不到记录
- python - 使用 python 生成 3D 正弦曲线
- sql - Hibernate SQLServer2017 列在选择列表中无效,因为它不包含在聚合函数或 GROUP BY 子句中
- dart - 使用 canvas.drawLine() 打印多行时如何添加时间延迟
- ios - 在 Swift 4 中删除 FCMToken
- gnuplot - 如何使虚线网格线相交在gnuplot中制作十字准线?