已配置Django CORS仍无法使用fetch：遭CORS策略拦截求助

Stack Overflow上有不少针对该问题的解决方案，部分方案写得很详尽，但我严格按照配置说明操作后，问题还是没解决，麻烦帮忙指出错误。

JS代码 #

let endpoint = 'http://192.168.4.28:8000/test-put'
const form_data = new FormData();

form_data.append("payload", payload);

await fetch(endpoint, {
    credentials: "include",
    method: "PUT",
    body: form_data,
    headers: {
        "X-CSRFToken": getCookie("csrftoken"),
    },
})

urls.py代码 #

path('test-put/', views.TextPut.as_view()),

views.py代码 #

class TextPut(View):
    def put(self, request):
        return {}

settings.py代码 #

...
ALLOWED_HOSTS = ['192.168.4.28']
...
CORS_ALLOWED_ORIGINS = [
    'http://localhost:8888',
]

CSRF_TRUSTED_ORIGINS = [
    'http://localhost:8888',
]

CORS_ALLOW_CREDENTIALS = True
...
INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]
...
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
    'django.middleware.common.CommonMiddleware',
    ...
]
...
CORS_ALLOW_METHODS = [
    'GET',
    'PUT',
    'POST',
]

运行错误信息 #

从源 'http://localhost:8888' 访问 'http://192.168.4.28:8000/test-put' 已被CORS策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。如果不透明响应满足您的需求，请将请求的模式设置为 'no-cors' 以在禁用CORS的情况下获取资源。

可能的错误点及修复方案 #

1. 视图返回格式错误：Django的View类不能直接返回字典{}，这会触发服务器内部错误，导致corsheaders中间件无法正常添加CORS响应头。需要改成返回合法的响应对象，比如：

from django.http import JsonResponse

class TextPut(View):
    def put(self, request):
        return JsonResponse({})

2. 确认中间件顺序：corsheaders.middleware.CorsMiddleware必须放在django.middleware.common.CommonMiddleware之前，你的配置里已经符合要求，但可以再检查是否有其他中间件干扰。

3. 验证CSRF令牌获取：确保getCookie("csrftoken")能正确拿到令牌，否则可能触发CSRF验证失败，同样会导致响应头异常。可以在控制台打印令牌值确认。

4. 检查Django服务运行地址：确认Django是在192.168.4.28:8000上运行的，而不是localhost:8000，否则ALLOWED_HOSTS配置不匹配也会引发问题。

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