Express路由重复触发问题：含HTML5 Video时路由被调用两次

问题原因 #

你的视频标签用了相对路径的src（比如beach0.mp4），当页面在/v/13路径下时，浏览器会把这个相对路径解析成/v/beach0.mp4，刚好命中你定义的/v/:vkey路由——这就是为什么路由会被调用两次，第二次的vkey变成了视频文件名。而你的/v/:vkey路由是返回页面的，不是返回视频文件的，所以视频加载不到内容，只会显示空白控件。

解决方案 #

1. 修正视频src为绝对路径 #

把视频的src改成基于网站根目录的绝对路径，比如：

<video src="/videos/beach0.mp4" controls></video>

2. 配置Express静态资源托管 #

用express.static专门托管视频文件，确保请求视频路径时直接返回文件，不会走页面路由：

const path = require('path');
const express = require('express');
const app = express();

// 假设视频文件存放在项目根目录的public/videos文件夹下
app.use('/videos', express.static(path.join(__dirname, 'public', 'videos')));

// 你的页面路由
app.get('/v/:vkey', (req, res) => {
  // 返回页面逻辑
  res.send(`<video src="/videos/beach0.mp4" controls></video>`);
});

app.listen(4107);

3. 验证效果 #

修改后访问localhost:4107/v/13：

• 浏览器只会请求一次/v/13获取页面
• 然后请求/videos/beach0.mp4加载视频，这个请求会被静态资源路由处理，不会触发/v/:vkey
• 视频控件能正常加载并播放内容

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