NextJS中fetch请求Content-Type不生效，对接Django API遇阻求助

问题核心 #

你显式设置了Content-Type: application/json，但实际请求头却显示为text/plain;charset=UTF-8，根源在于代码中的mode: "no-cors"配置。

原因说明 #

当使用no-cors模式时，浏览器会严格限制可自定义的请求头，仅允许CORS安全请求头（如Accept、Content-Type仅支持application/x-www-form-urlencoded、multipart/form-data、text/plain三种）。application/json不在允许列表内，浏览器会自动将其替换为text/plain。

解决步骤 #

1. 移除no-cors模式
   删除mode: "no-cors"配置，fetch默认使用cors模式，这是跨域请求的正确模式。

2. 修改后的前端代码

async function onSubmit(data: z.infer<typeof FormSchema>) {
    try {
        const response = await fetch(apiEndpoint, {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });

        if (response.ok) {
            console.log('Ok');
        }
    } catch (error) {
        console.error(error);
    }
}

3. 配置Django API的CORS支持
   确保Django服务器允许前端域名的跨域请求，推荐使用django-cors-headers包：
   • 安装依赖：

     pip install django-cors-headers
     

   • 在settings.py中添加配置：

     INSTALLED_APPS = [
         ...
         'corsheaders',
         ...
     ]
     
     MIDDLEWARE = [
         ...
         'corsheaders.middleware.CorsMiddleware',
         'django.middleware.common.CommonMiddleware',
         ...
     ]
     
     # 开发环境可临时允许所有域名，生产环境请指定具体域名
     CORS_ALLOW_ALL_ORIGINS = True
     # 生产环境示例：
     # CORS_ALLOWED_ORIGINS = [
     #     "https://your-frontend-domain.com",
     #     "http://localhost:3000",
     # ]
     

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