如何从后端public目录获取资源src路径供前端展示

核心逻辑：服务端磁盘上的文件无法被前端直接读取，必须先将存放MP3的public目录配置为静态资源托管目录，生成可通过HTTP访问的网络地址后，才能填入音频标签的src属性使用。

1. 后端静态资源配置（以最常用的Node.js Express框架为例） #

在server端的入口文件（通常为src/index.js或src/app.js）中添加静态资源映射规则：

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

// 将src/public目录映射为/static前缀的公开访问路径
app.use('/static', express.static(path.join(__dirname, 'public')))

// 其余原有接口、服务配置...
app.listen(3000, () => console.log('服务启动在3000端口'))

配置完成重启服务后，资源访问规则如下：

• 若public目录下直接存放test.mp3，对应访问地址为http://你的后端服务IP:端口/static/test.mp3
• 若public下存在子目录，例如public/audio/2024/record.mp3，对应访问地址为http://你的后端服务IP:端口/static/audio/2024/record.mp3
• 前端utalk项目中直接将上述地址填入<audio>标签的src属性即可正常加载播放

2. 常见注意事项 #

绝对不要把服务器本地磁盘路径（例如D:/project/server/src/public/xxx.mp3）填给前端，该路径指向访问用户的本地磁盘，无法读取服务器上的文件

• 前后端分离部署时，需要给/static路由配置跨域允许规则，避免前端加载资源时被浏览器跨域策略拦截
• 生产环境如果使用Nginx做反向代理，可以直接由Nginx接管静态资源请求，不需要经过后端服务，性能更高，参考配置：

location /static/ {
    alias /实际部署路径/server/src/public/;
    autoindex off; # 关闭目录浏览，防止所有上传文件被恶意遍历
}

项目目录参考 #

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