Forbidden csrf token missing

Using Django Forms & APIs
1

this is my view.py:

@csrf_exempt
@api_view(['GET', 'POST'])
def create_mobile_view(request):
    if request.method == 'GET':
        data = Mobile.objects.all()
        serializer = MobileSerializer(data, context={'request': request}, many=True)
        return Response(serializer.data)
    elif request.method == 'POST':
        serializer = CreateMobileSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(status=status.HTTP_201_CREATED)

    return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

this is my function based React Component:

const [formData, setformData] = React.useState({
        modelName: '',
        company: '',
        phoneImg1: '',
        phoneImg2: '',
        phoneImg3: '',
        storage: 0,
        batteryCapacity: 0,
        camera: '',
        avilableNumbers: 0,
        price: 0,
        discountPercentage: 0,
    })

    const requestOptions = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X_CSRFTOKEN': Cookies.get('csrftoken')
        },
        body: JSON.stringify(formData),
    };

    function handleChange(event) {
        const { name, value } = event.target
        setformData(prevInfo => ({
            ...prevInfo,
            [name]: value
        }))
    };
    

    function submitForm() {

        console.log(formData)
        fetch('/mobile/create/', requestOptions).then(res => console.log(res))

    };
2

What have you done so far to identify the source of the issue here?

Since you mention you’re using React here, are you loading the page containing the React components from your Django site? Or is it being loaded elsewhere? (If you’re loading it from a different site, then there possibly are the CORS-related issues needing to be addressed.)

Have you read the docs on How to use Django’s CSRF protection and the docs for the CSRF_ - related settings?

Have you looked at what you’re submitting in the POST request to verify that you are sending the token?

(I will point out that in your headers, you have X_CSRFTOKEN as the header name in your JavaScript instead of X-CSRFToken as defined in the docs. See the note in the HttpRequest.META section of the docs for why that’s important.)

3

It’s from my Django site.
And yes I’ve read the docs but the problem didn’t solve.
I changed the X_CSRFTOKEN to X_CSRFToken but nothing new happened.

4

Please post all of your CSRF_ settings from your settings file.

Also:

That is not what I suggested you change the headers entry to.

What I wrote:

5

my CSRF settings.py:

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',
]
...
CSRF_COOKIE_NAME = "csrftoken"
CSRF_HEADER_NAME = "HTTP_X_CSRFTOKEN"

and i changed X_CSRFToken in js file and nothing happend.