Django接口Postman请求正常，前端同Payload请求失败排查

我的Django API接口通过Postman提交Payload可正常工作，但使用完全相同的Payload从前端提交时却失败，即使已禁用CORS。后端日志显示OPTIONS请求返回200 OK，但无POST请求记录；浏览器网络面板显示POST请求失败，Axios报500网络错误。

相关代码 #

模型类 #

class Activity(models.Model):     
    cid = models.CharField(max_length=10)     
    percent = models.IntegerField()     
    name = models.CharField(max_length=255)

视图集 #

class ActivityViewSet(viewsets.ModelViewSet):
    queryset = Activity.objects.all()
    serializer_class = ActivitySerializer

    def get_queryset(self):
        queryset = self.queryset  # Start with the base queryset
    
        # Get the cid from the query parameters
        cid = self.request.query_params.get('cid')
    
        # If cid is provided in the query parameters, filter the queryset
        if cid:
            queryset = queryset.filter(cid=cid)
    
        return queryset

路由配置 #

router.register(r'activities', ActivityViewSet)

前端Axios请求代码 #

const postOutcomesAsync = async () => {
function getCSRFToken() {
const csrfCookie = document.cookie.match(/csrftoken=([\w-]+)/);
if (csrfCookie) {
return csrfCookie[1];
}
return null;
}
const csrfToken = getCSRFToken();

              axios.post('http://127.0.0.1:8000/activities/', inputValues[2], {
                headers: {
                  'Content-Type': 'application/json',
                  'X-CSRFToken': csrfToken
                }
              });
        
            console.log('All activities posted successfully');
            
          } 

• 捕获Axios错误详情：当前代码未处理请求错误，无法定位具体问题。修改代码添加try/catch，打印错误响应：

  const postOutcomesAsync = async () => {
    function getCSRFToken() {
      const csrfCookie = document.cookie.match(/csrftoken=([\w-]+)/);
      return csrfCookie ? csrfCookie[1] : null;
    }
    const csrfToken = getCSRFToken();
  
    try {
      const response = await axios.post('http://127.0.0.1:8000/activities/', inputValues[2], {
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': csrfToken
        }
      });
      console.log('请求成功:', response.data);
    } catch (error) {
      console.error('错误详情:', error.response ? error.response.data : error.message);
    }
  }
  

• 验证CSRF Token有效性：在浏览器控制台打印csrfToken，确认是否为null。若为空，需：

  1. 确保前后端域名一致（比如都用localhost或127.0.0.1）；
  2. 在Django的settings.py中添加前端域名到CSRF_TRUSTED_ORIGINS：

     CSRF_TRUSTED_ORIGINS = ['http://localhost:3000', 'http://127.0.0.1:3000']
     

• 检查Payload格式：打印inputValues[2]确认结构是否和Postman中的Payload完全一致，确保是合法的JSON对象，而非FormData或其他格式。

• 核对Django配置：

  1. 确保django.middleware.csrf.CsrfViewMiddleware在MIDDLEWARE列表中；
  2. 若使用django-cors-headers，确认中间件顺序正确且配置允许前端域名：

     INSTALLED_APPS = ['corsheaders', ...]
     MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ...]
     CORS_ALLOW_ALL_ORIGINS = True  # 或指定具体允许的 origins
     

• 查看Django完整日志：检查Django控制台或日志文件，寻找POST请求的错误堆栈信息，这是定位后端问题的关键（比如序列化错误、字段验证失败等）。

• 补全异步请求的await：原代码中axios.post未加await，会导致函数提前执行后续代码且无法捕获异步错误，必须添加await关键字。

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