Express服务不同路径下axios.post请求报错问题排查

• 项目仓库地址：e_commerce_advance

服务端入口文件index.js代码如下：

const express = require('express')
const bodyParser = require('body-parser')


const UserService = require('./services/user-service')
const app = express()

app.set('view engine', 'pug')
app.use(bodyParser.json())

app.get('/', (req, res) => {
    res.render('index')
})

app.get('/users/all', async (req, res) => {
    const users = await UserService.findAll()
    res.render('user', { users })
})

app.get('/users/:id', async (req, res) => {
    const user = await UserService.find(req.params.id)
    res.send(user)
})

app.post('/users', async (req, res) => {
    const user = await UserService.add(req.body)
    res.send(user)
})

app.delete('/users/:id', async (req, res) => {
    const user = await UserService.del(req.params.id)
    res.send(user)
})

app.listen(3000, () => {
    console.log('Server listening')
})

本地启动上述Express服务，监听3000端口：

• 在http://localhost:3000/ 或 http://localhost:3000/users/all 页面下发起新增用户的axios.post请求时，功能可正常运行
• 在http://localhost:3000/users/1 路径下发起相同post请求时会抛出错误
  不清楚路径层级差异为何会影响请求的授权校验与接收处理逻辑。

相关报错截图：

这个问题和后端接收逻辑、授权校验没有任何关系——当前后端代码里根本没写任何授权校验逻辑，报错纯粹是前端请求路径写法错误，触发了浏览器的相对路径解析规则导致的：

1. 从报错截图可以看到，在/users/1页面下发起的POST请求最终地址是/users/1/users，返回404，说明写axios请求时用了不带开头斜杠的相对路径，写法类似axios.post('users', data)
2. 浏览器解析非斜杠开头的相对请求路径时，会基于当前页面的URL路径替换最后一段地址做拼接：
   • 当前页面是根路径/时，相对路径users会被解析为/users，正好匹配后端定义的POST /users接口，所以请求正常
   • 当前页面是/users/1时，浏览器会把当前路径最后一段的1替换为users，最终解析出的请求地址是/users/1/users，后端没有定义这个接口，自然返回404错误
3. /users/all页面下请求正常，是因为该页面是服务端渲染的pug模板，模板内写的请求路径是带开头斜杠的绝对路径，和在/users/1页面（该接口直接返回JSON数据，无前端页面代码）控制台手动测试时写的相对路径写法不一致，才会出现表现差异。

所有接口请求统一使用以单斜杠开头的绝对路径，禁止写不带根前缀的相对路径：

// 错误写法：相对路径，解析结果受当前页面路径影响
axios.post('users', reqData)

// 正确写法：绝对路径，永远从域名根路径开始解析，不受当前页面层级影响
axios.post('/users', reqData)

修改后无论在哪个页面路径下发起请求，都会固定请求http://localhost:3000/users接口，不会再出现路径拼接错误的问题。

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