Azure部署Django+Vue生产环境前端加载媒体文件报404

问题根因与对应修复 #

• 配置缺失导致返回相对路径：当前配置仅定义了静态文件的STATIC_URL指向Blob地址，未配置媒体文件的MEDIA_URL，且自定义存储类存在属性拼写错误，导致接口返回的文件地址为相对路径，前端加载时会以自身部署域名为根拼接地址，触发404。

  1. 在settings.py中补充媒体文件域名配置，注意存储账户名需和实际账户一致：

  MEDIA_LOCATION = "media"
  AZURE_ACCOUNT_NAME = "eltechstorage" # 和自定义存储类中账户名保持一致，不要填占位符
  AZURE_ACCOUNT_KEY="你的存储账户密钥"
  AZURE_CUSTOM_DOMAIN = f'{AZURE_ACCOUNT_NAME}.blob.core.windows.net'
  AZURE_LOCATION="media"
  AZURE_CONTAINER="media"
  
  STATIC_LOCATION = "static"
  STATIC_URL = f'https://{AZURE_CUSTOM_DOMAIN}/{STATIC_LOCATION}/'
  MEDIA_URL = f'https://{AZURE_CUSTOM_DOMAIN}/{MEDIA_LOCATION}/' # 新增媒体文件访问根地址
  STATICFILES_STORAGE = 'el.custom_azure.AzureStaticStorage' # 建议静态存储也单独定义类
  DEFAULT_FILE_STORAGE = 'el.custom_azure.AzureMediaStorage'
  AZURE_CONNECTION_TIMEOUT_SECS=100
  

  2. 修正custom_azure.py的拼写错误，补充静态文件存储类，避免路径拼接异常：

  from storages.backends.azure_storage import AzureStorage
  
  class AzureMediaStorage(AzureStorage):
      account_name = "eltechstorage"
      account_key = "你的存储账户密钥"
      azure_container = "media"
      location = "media"
      expiration_secs = None # 修正原错误属性名expiration_specs，配置为永久公开访问链接
  
  class AzureStaticStorage(AzureStorage):
      account_name = "eltechstorage"
      account_key = "你的存储账户密钥"
      azure_container = "static"
      location = "static"
      expiration_secs = None
  

  3. 精简urls.py配置：生产环境静态、媒体文件全部由Azure Blob托管，Django不需要处理这类文件的路由，删除冗余配置：

  from django.contrib import admin
  from django.urls import path,include
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      path("",include("main.urls"))
  ]
  # 删除以下冗余代码，生产环境Django不托管静态资源
  # from django.contrib.staticfiles.urls import staticfiles_urlpatterns
  # from django.conf import settings
  # from django.conf.urls.static import static
  # urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
  

• Blob存储未配置CORS规则：Vue前端部署域名和Azure Blob存储域名不同源，浏览器会拦截跨域资源请求，部分场景下控制台会表现为404错误。
  进入Azure存储账户后台的「资源共享(CORS)」配置页，为Blob服务添加规则：

  • 允许的源：填写Vue前端生产环境域名，本地调试阶段可临时配置为*
  • 允许的方法：勾选GET、HEAD
  • 允许的标头：填写*
  • 公开的响应标头：填写*
  • 最长缓存时间：设置为3600秒即可

• 序列化器返回路径格式校验：配置完成后重启服务，调用接口确认返回的文件字段为完整的Blob绝对路径（格式为https://<存储账户名>.blob.core.windows.net/media/xxx/xxx.jpg），如果仍返回相对路径，检查DRF序列化器的文件字段配置，移除手动截断路径的逻辑。

验证流程 #

1. 上传测试文件后直接访问接口返回的绝对路径，确认文件可以正常下载
2. 打开前端对应页面，检查浏览器控制台的资源请求地址为Blob完整路径，无跨域报错，文件正常加载

内容的提问来源于stack exchange，提问作者Syed Bilal Ali