React中使用Axios从Django后端获取图片报404错误求助

问题根源 #

浏览器请求图片的地址是前端项目端口（localhost:5173），但图片实际存储在Django后端的127.0.0.1:8000/media/目录下，前端直接使用post.image返回的相对路径，会导致请求指向前端域名，触发404错误。

步骤1：配置Django开发环境的媒体文件服务 #

首先确保Django已正确配置媒体文件路径，并在开发环境中挂载媒体文件路由：

# settings.py
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

在项目主urls.py中添加媒体文件路由：

# 主urls.py
from django.conf import settings
from django.conf.urls.static import static
from django.urls import path, include

urlpatterns = [
    path('BlogHost/', include('你的app名称.urls')),
    # 其他路由
]

# 开发环境下挂载媒体文件访问路径
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

步骤2：修改序列化器返回完整图片URL #

默认序列化器返回图片相对路径，需要重写字段生成完整绝对URL：

# serializers.py
from rest_framework import serializers
from .models import Blog

class BlogSerializer(serializers.ModelSerializer):
    image = serializers.SerializerMethodField()

    def get_image(self, obj):
        request = self.context.get('request')
        if obj.image:
            return request.build_absolute_uri(obj.image.url)
        return None

    class Meta:
        model = Blog
        fields = '__all__'  # 或指定需要的字段，如('title', 'body', 'image', 'category', 'href')

更新视图，将请求对象传入序列化器上下文：

# views.py
from .models import Blog
from .serializer import BlogSerializer
from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET', 'POST'])
def BlogHost(request, format=None):
    if request.method == 'GET':
        blog = Blog.objects.all()
        # 传递request到序列化器上下文
        serialize = BlogSerializer(blog, many=True, context={'request': request})
        return Response(serialize.data)

步骤3：处理跨域请求问题 #

前端和后端端口不同，需配置Django允许跨域：
先安装依赖：

pip install django-cors-headers

在settings.py中添加配置：

# settings.py
INSTALLED_APPS = [
    # 其他已安装app
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 其他中间件
]

# 开发环境允许所有域名跨域（生产环境请指定具体域名）
CORS_ALLOW_ALL_ORIGINS = True
# 生产环境示例：
# CORS_ALLOWED_ORIGINS = [
#     "http://localhost:5173",
#     "http://127.0.0.1:5173",
# ]

步骤4：前端验证 #

此时前端获取的post.image会是完整的http://127.0.0.1:8000/media/gig2_sWgfG4m.png地址，无需修改现有前端代码，直接使用即可。

重启Django服务器和React项目，图片即可正常加载。

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