JavaScript fetch向Django REST API发POST请求报415 Unsupported Media Type

问题根因 #

你代码里的核心错误是fetch配置了mode: "no-cors"，这个模式下浏览器会禁止设置任何非简单请求头，你写的Content-Type: application/json会被浏览器直接丢弃，DRF后端收到请求后识别不到正确的媒体类型，就返回415错误。
Postman发请求正常是因为Postman没有浏览器的跨域限制，不会自动抹除自定义请求头；GET请求正常是因为GET不需要传递Content-Type请求头，不会触发该限制。

解决步骤 #

第一步：修改前端fetch代码 #

去掉mode: "no-cors"配置，修改后的JS部分如下：

let myurl2 = "http://127.0.0.1:8000/myfamily/";
async function myfu() {
    let response = await fetch(myurl2, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({firstname: "first", secondname: "second"})
    })
    // 可选：打印返回结果校验
    console.log(await response.json())
};
myfu();

第二步：配置Django跨域支持（如果出现跨域报错） #

去掉no-cors配置后，浏览器会按照正常跨域规则校验请求，如果你打开页面的域名/端口和Django服务不一致，会出现跨域错误，安装django-cors-headers配置即可：

1. 安装依赖：

pip install django-cors-headers

2. 修改项目的settings.py：

INSTALLED_APPS = [
    # 其他原有app
    'corsheaders',
    'rest_framework',
]

MIDDLEWARE = [
    # 放在中间件列表最顶部，优先加载
    'corsheaders.middleware.CorsMiddleware',
    # 其他原有中间件
    'django.middleware.common.CommonMiddleware',
]

# 开发阶段可直接设置为True，允许所有来源跨域
CORS_ALLOW_ALL_ORIGINS = True

重启Django服务后再次发起POST请求即可正常响应。

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