Django+SvelteKit仅Windows下图片上传端点CORS问题求助

后端基于Django + Django REST Framework搭建，前端使用SvelteKit。Windows和macOS全浏览器下的POST、DELETE等常规请求均正常，CORS配置无误，但仅Windows系统的Edge、Chrome、Firefox浏览器中，图片上传端点无法正常工作。该端点使用DRF的APIView实现，代码如下：

class ImageUploadParser(FileUploadParser):
    media_type = "image/*"

    def get_filename(self, stream, media_type, parser_context):
        # 自定义文件名，根据实际文件类型获取扩展名
        return "unused.nope"


class ImageUploadView(APIView):
    permission_classes = (permissions.IsAuthenticated,)
    parser_classes = [ImageUploadParser]

    def post(self, request):
        # [文件上传相关逻辑...]

        return Response({"url": f"{relative_path}/{filename}"}, status=status.HTTP_201_CREATED)

已正确配置corsheaders.middleware.CorsMiddleware和CORS_ALLOWED_ORIGINS，其余端点均正常，且macOS下所有浏览器的图片上传功能可正常使用。

1. 解析器MIME类型匹配兼容性问题 #

Windows下Chrome/Edge/Firefox可能返回更具体的图片MIME类型（如image/png），虽然image/*理论上应匹配，但旧版DRF的解析器匹配逻辑可能存在兼容bug。

• 解决方法：
  • 尝试将media_type改为*/*，覆盖所有类型：

    class ImageUploadParser(FileUploadParser):
        media_type = "*/*"
    

  • 升级DRF到最新稳定版，修复已知的解析器匹配问题。

2. 自定义文件名格式触发Windows环境校验 #

get_filename返回的unused.nope无有效扩展名，Windows环境下的文件流处理可能对文件名格式有更严格的校验，导致解析失败。

• 解决方法：
  • 临时修改get_filename返回带有效扩展名的文件名（如temp.jpg），测试是否能正常解析。
  • 动态生成带对应扩展名的临时文件名：根据文件实际MIME类型映射扩展名（如image/png对应.png），再拼接成临时文件名返回。

3. 预检请求头处理异常 #

文件上传使用multipart/form-data，Windows浏览器发送的预检请求头可能与macOS存在细微差异，导致CORS中间件未正确处理。

• 解决方法：
  • 确保CORS_ALLOW_HEADERS包含文件上传所需的头字段：

    CORS_ALLOW_HEADERS = [
        "accept",
        "accept-encoding",
        "authorization",
        "content-type",
        "origin",
        "x-requested-with",
    ]
    

  • 开启Django日志，记录Windows下预检请求的完整头信息，对比macOS的请求差异，针对性调整CORS配置。

4. 文件大小超限 #

Windows浏览器上传时可能携带额外元数据，导致请求总大小超过Django或Web服务器的限制。

• 解决方法：
  • 调大Django的文件上传大小限制：

    DATA_UPLOAD_MAX_MEMORY_SIZE = 52428800  # 50MB
    FILE_UPLOAD_MAX_MEMORY_SIZE = 52428800
    

  • 检查Web服务器（如Nginx）的client_max_body_size配置，确保与后端限制一致。

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