Django 和 ReactJS 集成：“无法加载资源：服务器响应状态为 404（未找到）”错误

Question

I am working on an e-commerce project where I am using Django for the backend and ReactJS for the front end. However, I am encountering an error when trying to fetch data from the ReactJS component to the Django backend. The error message "Failed to load resource: the server responded with a status of 404 (Not Found)" appears in the browser console.

Here is a brief overview of the relevant code snippets:

In Django's urls.py :

models.py:

class Farmer(models.Model):
    GENDER_CHOICES = (
        ('M', 'Male'),
        ('F', 'Female'),
        ('O', 'Other'),
    )

    first_name = models.CharField(max_length=255)
    last_name = models.CharField(max_length=255)
    email = models.EmailField(unique=True)
    password = models.CharField(max_length=128)
    address = models.CharField(max_length=255)
    city = models.CharField(max_length=255)
    state = models.CharField(max_length=255)
    zip_code = models.CharField(max_length=10)
    phone_number = models.CharField(max_length=10)
    gender = models.CharField(max_length=1, choices=GENDER_CHOICES)
    aadhaar_card = models.CharField(max_length=12)
    stripe_connect_id = models.CharField(max_length=255, blank=True)

    def __str__(self):
        return self.email

        
    def set_password(self, password):
        self.password = password

serializers.py:

class FarmerRegistrationSerializer(serializers.ModelSerializer):
    password = serializers.CharField(write_only=True, style={'input_type': 'password'})

    class Meta:
        model = Farmer
        fields = ['first_name', 'last_name', 'email', 'password', 'address', 'city', 'state', 'zip_code',
                  'phone_number', 'gender', 'aadhaar_card']

    def validate(self, attrs):
        form = FarmerRegistrationForm(data=attrs)
        if form.is_valid():
            return attrs
        else:
            raise serializers.ValidationError(form.errors)

    def create(self, validated_data):
        form = FarmerRegistrationForm(data=validated_data)
        if form.is_valid():
            return form.save()
        else:
            raise serializers.ValidationError(form.errors)

views.py:

@method_decorator(csrf_exempt, name='dispatch')
class FarmerRegistrationView(APIView):
    def post(self, request):
        serializer = FarmerRegistrationSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

and urls.py:

path('api/farmers/register', FarmerRegistrationView.as_view(), name='farmer-register'),

In the ReactJS FarmerRegistrationPage.js:

import React, { useState } from 'react';
import axios from 'axios';
import './css/FarmerRegistrationPage.css';

const FarmerRegistrationPage = () => {
  const [formData, setFormData] = useState({
    first_name: '',
    last_name: '',
    email: '',
    password: '',
    address: '',
    city: '',
    state: '',
    zip_code: '',
    phone_number: '',
    gender: '',
    aadhaar_card: '',
  });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      console.log('Form Data:', formData); // Debug: Log form data
      const response = await axios.post('/api/farmers/register', formData);
      console.log('Response:', response.data); // Debug: Log response data
      setFormData({ ...formData, first_name: '' }); // Update the reset state accordingly
      alert('Registration successful');
    } catch (error) {
      if (error.response) {
        console.log(error.response.data);
        if (error.response.status === 400) {
          // Handle specific validation errors
          alert('Registration failed: ' + error.response.data.error_message);
        } else {
          // Handle other server-side errors
          alert('Registration failed: ' + error.response.data.detail);
        }
      } else if (error.request) {
        console.log(error.request);
        alert('Registration failed: No response received from the server');
      } else {
        console.log('Error', error.message);
        alert('Registration failed: ' + error.message);
      }
    }
  };
  
  

  return (
    <div>
      <h2>Farmer Registration</h2>
      <form onSubmit={handleSubmit}>
        <label>
          First Name:
          <input
            type="text"
            name="first_name"
            value={formData.first_name}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <label>
          Last Name:
          <input
            type="text"
            name="last_name"
            value={formData.last_name}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <label>
          Password:
          <input
            type="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <label>
          Address:
          <input
            type="text"
            name="address"
            value={formData.address}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <label>
          City:
          <input
            type="text"
            name="city"
            value={formData.city}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <label>
          State:
          <input
            type="text"
            name="state"
            value={formData.state}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <label>
          Zip Code:
          <input
            type="text"
            name="zip_code"
            value={formData.zip_code}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <label>
          Phone Number:
          <input
            type="text"
            name="phone_number"
            value={formData.phone_number}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <label>
          Gender:
          <select
            name="gender"
            value={formData.gender}
            onChange={handleChange}
            required
          >
            <option value="">Select</option>
            <option value="M">Male</option>
            <option value="F">Female</option>
            <option value="O">Other</option>
          </select>
        </label>
        <br />
        <label>
          Aadhaar Card Number:
          <input
            type="text"
            name="aadhaar_card"
            value={formData.aadhaar_card}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <button type="submit">Register</button>
      </form>
    </div>
  );
};
export default FarmerRegistrationPage;

Despite setting up the URL route correctly in Django and using the same URL path in the ReactJS component's axios POST request, I am still encountering the 404 error. I have checked the.network tab in the browser's developer tools, and it shows that the request to /api/farmers/register returns a 404 status.

I have verified that the Django backend is running correctly and other API endpoints are accessible. The issue seems to be specific to this particular endpoint.

I would appreciate any insights or suggestions on how to resolve this error and successfully fetch data from the ReactJS component to the Django backend. Thank you!

In browser console:

Form Data: Object

:3000/api/farmers/register:1 

Failed to load resource: the server responded with a status of 404 (Not Found)

FarmerRegistrationPage.js:34 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot POST /api/farmers/register</pre>
</body>
</html>

Answer 1

plz put absulate url which you called in react side i mean (base_url + route_name) like this... 192.168.1.30:8000/api/farmers/register