Express(TypeScript)同路由GET正常POST返回404问题求助

核心问题：请求构造错误 #

错误提示里的/users%20Content-Type:%20application/json表明，你发送POST请求时错误地把Content-Type: application/json拼到了URL里，而不是将其设置为请求头。这直接导致Express找不到匹配的路由，返回404。

正确请求方式示例 #

• 使用curl：

curl -X POST \
  http://localhost:48080/users \
  -H "Content-Type: application/json" \
  -d '{"name":"Kyle","password":"password"}'

• 使用Postman：在「Headers」标签添加Content-Type键，值设为application/json；切换到「Body」标签，选择raw格式并输入JSON数据。

服务端代码的必要修正 #

即使请求构造正确，你的代码还有两处问题会导致功能异常：

1. 中间件顺序错误 #

app.use(cors(...))放在了路由定义和app.listen()之后，Express中间件按注册顺序执行，这会导致CORS中间件对之前定义的路由不生效。需要将其移到路由定义前：

/* Enable CORS */
app.use(cors({
    origin: ["http://localhost:3000", "http://localhost:48080"],
    credentials: true,
    optionsSuccessStatus: 200
}));

// 之后再定义路由
app.get('/users', (req, res) => { ... })
app.post('/users', async (req, res) => { ... })

2. 缺少JSON请求体解析中间件 #

Express默认不会解析JSON格式的请求体，req.body会是undefined，导致无法获取用户提交的name和password。需要在路由前添加express.json()中间件：

const app = express();
// 添加JSON解析中间件
app.use(express.json());

// 之后注册CORS、定义路由...

修正后的关键代码片段：

const app = express();
const port: number = 48080;

// 解析JSON请求体
app.use(express.json());

// 启用CORS
app.use(cors({
    origin: ["http://localhost:3000", "http://localhost:48080"],
    credentials: true,
    optionsSuccessStatus: 200
}));

const users: { name: string; password: string; }[] = []

// 路由定义
app.get('/users', (req, res) => {
  res.json(users)
})

app.post('/users', async (req, res) => {
  try {
    const user = { name: req.body.name, password: req.body.password }
    users.push(user)
    res.status(201).send()
  } catch {
    res.status(500).send()
  }
})

// 最后启动服务
app.listen(port, () => {
    console.log(`API listening on port ${port}.`);
});

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