Express静态资源加载后如何请求额外GET接口？

Express的中间件按从上到下的顺序执行，express.static中间件会自动把目录下的index.html作为根路径/的默认响应文件。当你用axios请求/时，静态中间件先匹配到index.html并返回，后面定义的app.get('/')路由根本没机会执行，所以拿到的是HTML而非JSON数据。

最直接合理的方案是修改API路由路径，避免和静态文件的默认路由冲突：

1. 修改服务端代码（index.js） #

把返回JSON的路由改成非根路径，比如/api/names：

const express = require('express');
const app = express();
const names = {...}

app.use(express.static('./public'));

// 调整API路由路径
app.get('/api/names', (req, res) => {
  return res.json({names});
})

2. 修改前端请求代码（front-end.js） #

同步修改axios的请求路径：

axios.get('/api/names')
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err);
  }) 

这样用户访问/时，express.static依然会返回index.html；前端加载完成后，请求/api/names就能正确拿到JSON数据了。

内容的提问来源于stack exchange，提问作者hoo