Django+React项目中调取并播放音频文件的问题咨询

一、后端配置修正（优先推荐） #

1. 基础媒体配置校验 #

检查settings.py是否正确配置媒体资源参数：

# settings.py
MEDIA_URL = '/media/'
# 媒体文件实际存储的本地根目录
MEDIA_ROOT = BASE_DIR / 'media'

开发环境下需要在根路由中注册媒体资源访问路径：

# 项目根目录urls.py
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 原有路由：admin、api接口等
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

2. 序列化器与视图调整 #

DRF的FileField需要获取请求上下文才能自动拼接后端域名生成完整可访问URL，需要做两处修改：

• 序列化器指定返回文件URL：

from rest_framework import serializers
from .models import Song

class SongSerializer(serializers.ModelSerializer):
    # 声明use_url=True，默认会从上下文取请求拼接完整路径
    audio_file = serializers.FileField(use_url=True)
    class Meta:
        model = Song
        fields = ['id', 'audio_file', '其他需要返回的字段']

• 视图调用序列化器时传入请求上下文：
  如果是自定义视图手动实例化序列化器，需要显式传context参数：

# 视图示例
from rest_framework.response import Response
from rest_framework.views import APIView

class SongListView(APIView):
    def get(self, request):
        songs = Song.objects.all()
        # 必须传入context参数，序列化器才能拿到域名信息
        ser = SongSerializer(songs, many=True, context={'request': request})
        return Response(ser.data)

如果使用DRF的ModelViewSet，默认已经传递了请求上下文，不需要额外修改，完成前两步后接口会自动返回类似http://后端域名:端口/media/xxx.mp3的完整可访问路径。

二、前端兼容方案（无需修改后端时使用） #

如果不方便调整后端代码，可以在前端手动拼接完整路径：

• 先在React项目环境变量中配置后端地址，比如.env文件：
  REACT_APP_BACKEND_HOST=http://127.0.0.1:8000
• 拿到接口返回的相对路径后拼接前缀再赋值给audio标签：

// 假设接口返回的音频路径存在res.data.audio_file中
const fullAudioUrl = `${process.env.REACT_APP_BACKEND_HOST}${res.data.audio_file}`
// 赋值给audio标签
<audio src={fullAudioUrl} controls />

注意事项 #

• 生产环境部署时不要用Django自带的媒体资源服务，需要把/media路径交给Nginx、CDN等专业静态资源服务处理，在Nginx配置中添加location指向服务器上的媒体文件存储目录即可。
• 如果出现跨域问题，需要确保django-cors-headers配置中允许前端域名访问/media/*路径。

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