求助：Django REST API与Axios POST请求无法正常工作

一、解决manifest.json 404错误 #

React打包后的manifest.json位于frontend/public，但Django默认不会自动识别该路径，需配置静态文件与模板路径：

1. 修改settings.py：
   添加模板目录与静态文件目录配置：

   import os
   
   TEMPLATES = [
       {
           ...
           'DIRS': [os.path.join(BASE_DIR, 'frontend/build')],
           ...
       },
   ]
   
   STATIC_URL = '/static/'
   STATICFILES_DIRS = [
       os.path.join(BASE_DIR, 'frontend/build/static'),
       os.path.join(BASE_DIR, 'frontend/public'),  # 加入public目录以访问manifest.json
   ]
   STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
   

2. 配置主项目urls.py：
   添加视图返回React的index.html，确保根路径及静态文件可被正确访问：

   from django.views.generic import TemplateView
   
   urlpatterns = [
       ...
       path('', TemplateView.as_view(template_name='index.html')),
   ]
   

3. 环境验证：
   开发环境无需运行collectstatic，Django会自动从STATICFILES_DIRS读取文件；生产环境需执行python manage.py collectstatic将静态文件收集到STATIC_ROOT。

二、解决POST请求400/405错误 #

当前请求存在参数格式错误、未阻止表单默认行为、CSRF Token处理不当等问题，修复如下：

1. 阻止表单默认提交行为 #

点击按钮时，表单会触发默认GET提交，导致Method Not Allowed，需在handleClick中添加阻止逻辑：

function handleClick(e) {
  e.preventDefault(); // 阻止表单默认提交
  // 后续请求逻辑
}

2. 修正Axios请求格式 #

Axios的post方法参数顺序为url, data, config，你当前将headers与data混在同一个对象中，导致数据无法正确传递：

// 正确写法
axios.post('http://127.0.0.1:8000/post/', 
  { title: name, name: name }, // 第二个参数是请求数据
  {
    headers: {
      "Content-Type": "application/json", // 推荐用JSON格式，DRF默认支持
    }
  }
)

3. 正确处理CSRF Token #

无需硬写Token值，直接通过axios的默认配置读取cookie中的CSRF Token：

// 在组件初始化或全局配置中设置
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';

// 移除请求中手动设置的'X-CSRFToken'，让axios自动处理

如果cookie读取有问题，可使用原生JS获取：

function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
      const cookies = document.cookie.split(';');
      for (let i = 0; i < cookies.length; i++) {
          const cookie = cookies[i].trim();
          if (cookie.substring(0, name.length + 1) === (name + '=')) {
              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
              break;
          }
      }
  }
  return cookieValue;
}
// 在请求中使用
const csrftoken = getCookie('csrftoken');

4. 验证后端序列化器 #

确保ItemSerializer的字段与前端传递的title、name匹配，且模型中存在对应字段：

# 示例Serializer
class ItemSerializer(serializers.ModelSerializer):
    class Meta:
        model = Item
        fields = ['title', 'name'] # 需与模型字段一致

5. 查看具体错误信息 #

DRF返回400时，响应体包含具体错误详情，可在Axios的响应拦截中查看：

axios.post(...)
  .then(response => console.log(response))
  .catch(error => console.log(error.response.data)); // 打印错误详情

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