React中Axios未以POST方法发送请求，Django返回405错误

看起来你遇到的核心问题应该是Axios没有以POST方法发送请求——毕竟Django返回405错误就是明确告诉你当前请求的HTTP方法不被接口允许，而默认情况下Axios会用GET方法发起请求，如果你的后端接口只接受POST，自然会报错。

我先帮你把代码补全并修正，同时梳理几个关键注意点：

一、修正Axios请求代码 #

你原来的代码只构建了表单数据，但缺少了Axios的实际请求调用，而且必须明确使用axios.post()方法：

handleSubmit(e) {
  console.log('Form state: ', this.state);
  e.preventDefault();
  // 解构赋值让代码更简洁
  const { username, password } = this.state;
  const formData = { username, password };

  // 关键：使用axios.post而非默认的get
  axios.post('http://localhost:8000/你的后端接口路径/', formData)
    .then(response => {
      console.log('请求成功！返回数据:', response.data);
      // 这里可以加成功后的逻辑，比如跳转到首页、提示登录成功等
    })
    .catch(error => {
      console.error('请求失败:', error.response?.data || error.message);
      // 处理错误，比如提示用户账号密码错误
    });
}

二、几个必须检查的关键点 #

1. 确认Django后端接口允许POST方法

   • 如果是函数视图，记得用@require_http_methods(["POST"])装饰器限定允许的方法：

     from django.views.decorators.http import require_http_methods
     
     @require_http_methods(["POST"])
     def your_api_view(request):
         # 视图逻辑
     

   • 如果是类视图，要确保allowed_methods包含POST，或者继承的是APIView之类支持POST的基类：

     from rest_framework.views import APIView
     
     class YourAPIView(APIView):
         allowed_methods = ['POST']
         # 其他逻辑
     

2. 匹配后端期望的数据格式

   • Axios默认会把formData序列化为JSON，并设置Content-Type: application/json，如果你的Django后端是用Django REST Framework，这完全没问题；
   • 如果后端期望的是传统表单格式（application/x-www-form-urlencoded），你需要用qs库转换数据：

     // 先安装qs：npm install qs
     import qs from 'qs';
     
     // 在请求中转换
     axios.post('http://localhost:8000/你的接口/', qs.stringify(formData), {
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded'
       }
     })
     

3. 跨域问题（如果前后端端口不同）

   • 因为你的React和Django运行在不同端口，浏览器会触发跨域预检请求，这时候需要在Django中配置CORS：
     • 安装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
       

按照上面的步骤调整后，你的POST请求应该就能正常发送，Django也不会再返回405错误了。

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