Office Word插件中fetch调用Django API报错TypeError: Failed to fetch求助

可能原因及对应解决方案 #

1. Office插件Manifest未配置允许的目标域名 #

Office插件的沙盒环境默认限制跨域请求，必须在插件的manifest.xml中声明允许访问的后端域名：
打开插件manifest文件，添加<AppDomains>节点包含后端API地址：

<OfficeApp>
  <!-- 其他已有配置 -->
  <AppDomains>
    <AppDomain>http://127.0.0.1:8000</AppDomain>
  </AppDomains>
</OfficeApp>

修改后重新加载插件，确保配置生效。

2. Django后端CORS配置不全 #

即使后端能接收请求，Office插件的请求环境可能触发CORS校验，需完善Django的CORS配置：

• 先安装依赖包：

pip install django-cors-headers

• 在settings.py中添加如下配置：

INSTALLED_APPS = [
    # 其他已注册应用
    'corsheaders',
]

MIDDLEWARE = [
    # 必须放在CommonMiddleware之前
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 其他中间件
]

# 允许的请求源，需包含插件实际运行地址（比如https://localhost:3000）
CORS_ALLOWED_ORIGINS = [
    "http://127.0.0.1:8000",
    "https://localhost:3000",
]

# 若请求携带凭证（如Cookie），开启此项
CORS_ALLOW_CREDENTIALS = True

重启Django服务使配置生效。

3. 后端响应格式不合法（非有效JSON） #

response.json()要求后端返回标准JSON字符串，若返回纯文本、HTML或格式错误的JSON，会触发解析错误，最终表现为TypeError: Failed to fetch：

• 检查Django视图的返回内容，确保返回合法JSON：

from django.http import JsonResponse

def my_upload_api(request):
    # 文件上传处理逻辑
    return JsonResponse({"status": "success", "msg": "文件上传完成"})

• 若无需JSON响应，前端可改用response.text()解析：

const response = await fetch('http://127.0.0.1:8000/api/v1/my-upload-api', {
    method: 'POST',
    body: formData
});
const result = await response.text();
console.log(result);

4. 打印完整错误细节定位问题 #

在catch块中输出详细错误信息，明确问题类型：

try {
    const response = await fetch('http://127.0.0.1:8000/api/v1/my-upload-api', {
        method: 'POST',
        body: formData
    });
    // 先校验HTTP状态码
    if (!response.ok) {
        throw new Error(`HTTP错误: ${response.status}`);
    }
    const result = await response.json();
    console.log(result);
} catch (error) {
    console.error('请求错误详情:', error);
    console.error('错误类型:', error.name);
    console.error('错误描述:', error.message);
}

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