Question

将我的智能应用程序部署到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));
};

server.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

Answer 1

您的请求'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);

Answer 2

router.get('/', (list)) 

const list = (req, res) => {
  const sort = { title: 1 };
  Post.find()
    .sort(sort)
    //  .limit(10)
    .then((posts) => res.json(posts))
    .catch((err) => res.status(400).json("Error: " + err));
};    
module.exports = router;

在server.js中

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"));
});

....

app.use(authRoutes);
app.use(userRoutes);
app.use(postRoutes);

您需要像这样更新。

这只是表达中间件中的序列问题。您已经更新了有关get方法（/ *）的中间件。因此，它总是返回index.html而不是JSON。

Answer 3

在当前的实现中，您有2个app.get用于同一路径->'/' 因此，Express用第一个响应。现在是哪个：

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

您可以指定其他路径

app.use("/post", postRoutes);

或重新排列顺序。

app.use(authRoutes);
app.use(userRoutes);
app.use(postRoutes);

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

或更改控制器

router.post('/' ...) // instead of router.get('/'...)

您需要指定路由网址，或避免对同一路由使用两个“ app.get”。如果您愿意，也可以将控制器从“ app.get”更改为“ app.post”，express会认为它们有所不同。但是，如果两者都是同一路由的app.get，则第一个将发送响应，而第二个将永远不会被调用。

您可以做的是，首先尝试重新排列顺序。如果它确实有效，那确实是问题所在，请不要坚持使用它作为解决方案。这是错误的方法。相反，为您的路线指定其他网址，或将控制器从“ app.get”更改为“ app.post”

Answer 4

正如已经提到的一些答案将您的API和客户端路由分开，并找到了确切的问题，根据我在使用express服务您的React应用程序方面的经验，我只想添加一些建议。（技巧是还要添加版本控制）

app.use('/api/v1/auth', authRoutes);
app.use('/api/v1/user', userRoutes);
app.use('/api/v1/post', postRoutes);
if (process.env.NODE_ENV === 'production') {  
    app.use(express.static(path.join(__dirname, "client/build")));
    app.get("/*", (_, res) => {
     res.sendFile(path.join(__dirname, "client/build", "index.html"));
    });
}

GET请求返回index.html doc而不是json数据

4 个答案: