Chrome扩展通过Ajax向Django发送POST请求触发400错误

这种情况我之前踩过坑！cURL能正常请求但Chrome扩展不行，大概率是跨域配置、请求头规范或者扩展权限的问题，毕竟浏览器（包括扩展环境）对请求的限制比cURL严格得多。下面一步步排查：

1. 先搞定CORS跨域问题 #

虽然你和API都是HTTPS，但Chrome扩展的请求属于跨域请求，Django默认没有处理跨域的能力，这是最常见的原因。

解决步骤：

• 安装Django跨域插件：

  pip install django-cors-headers
  

• 修改settings.py配置：
  • 在INSTALLED_APPS里添加：

    'corsheaders',
    

  • 在MIDDLEWARE里添加（注意要放在django.middleware.common.CommonMiddleware前面）：

    'corsheaders.middleware.CorsMiddleware',
    

  • 配置允许的来源：
    开发阶段可以临时允许所有来源（方便测试）：

    CORS_ALLOW_ALL_ORIGINS = True
    

    生产环境一定要指定你的Chrome扩展ID（避免安全风险）：

    CORS_ALLOWED_ORIGINS = [
        "chrome-extension://你的扩展ID",
    ]
    

    扩展ID可以在Chrome扩展管理页面（chrome://extensions/）开启开发者模式后看到。

2. 检查Ajax请求头是否符合DRF要求 #

Django REST Framework（DRF）默认要求POST/PUT等请求的Content-Type为application/json，但原生Ajax如果不特意设置，默认会用application/x-www-form-urlencoded，这会导致DRF无法解析请求体，直接返回400。

对比你的cURL请求，你肯定是加了-H "Content-Type: application/json"，所以没问题，但Ajax要手动设置：

// 示例Fetch请求
fetch('https://你的AWS实例API地址/xxx/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // 必须加这个头
  },
  body: JSON.stringify(你的请求数据),
})
.then(response => response.json())
.catch(err => console.error(err));

3. 查看Django日志定位具体错误 #

400只是“Bad Request”的笼统提示，看日志能精准找到问题（比如参数格式错误、CSRF验证失败等）：

• 如果用Gunicorn部署，直接查看Gunicorn的日志文件；
• 或者检查Django配置的日志文件（settings.py里的LOGGING项）；
• 小技巧：如果是DRF的问题，日志里会明确提示“Invalid JSON data”或者“Missing required parameters”这类信息。

4. 确认Chrome扩展的权限配置 #

在你的扩展manifest.json里，必须声明对API域名的访问权限，否则Chrome会拦截请求：

{
  "manifest_version": 3, // 或者你的版本
  "permissions": [
    "https://你的AWS实例API地址/*"
  ],
  // 其他配置...
}

按照这个顺序排查，基本能解决问题！我之前就是漏了扩展权限和CORS配置，折腾了好久😂

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