header ‘access-control-allow-credentials’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response ajax django

i'm trying to make a post request with ajax. i'm using laravel as frontend and django drf as backend.i'm getting cors error.i have tried adding everything in ajax header request and on backend i have install corsheader. its showing error on option request its not even hitting the post request. i tried with empty form same error

form:

<form id="category_add" method="#">
        <div class="card">
            <div class="formBlock">
                <div class="row">
                    @csrf
                    <div class="col-md-12">
                        <div class="browseImg">
                            <i></i>
                            <span>Uplolad Here</span>
                            <input type="file" class="browseField" name="image" id="c_image">
                        </div>
                        <!-- <div class="formControl static">
                                    <label for="" class="formLabel">Category Name</label>
                                    <input type="text" name="" class="formField" placeholder="Enter your name" id="">
                                </div> -->
                    </div>
                    <div class="col-md-4">
                        <div class="formControl static">
                            <label for="" class="formLabel">Category Name</label>
                            <input type="text" name="name" class="formField" placeholder="Enter your name" id="name">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="formControl static">
                            <label for="" class="formLabel">Category Status</label>
                            <select name="status" class="formField" id="status">
                                <option value="0">Inactive</option>
                                <option value="1">Active</option>

                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="formControl static">
                            <label for="" class="formLabel">Position</label>
                            <input type="text" name="position" class="formField" placeholder="Enter position" id="position">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="formControl static textarea">
                            <label for="" class="formLabel">Description</label>
                            <textarea class="formField" placeholder="Enter your description" rows="5" name="description" id="description"></textarea>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <input type="hidden" value="{{Session::get('auth_user')['token']}}" id="token">
        <div class="btnBlock d-flex justify-content-end">
            <a href="#;" class="btn btn-link btn-md">Cancel</a>
            <button type="submit" class="btn btn-md">Add</button>
        </div>
    </form>

ajax request:

    $(document).ready(function () {
    var home = "{{route('category.list')}}";
var url = "http://127.0.0.1:8888/api/v1/services/category/add/"
    $(document).on('submit', '#category_add', function (e) {
        e.preventDefault();
       
        token = $("#token").val()
        var formData = new FormData(this);
       
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Authorization': 'Token' + ' ' + token,
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Credentials": true,
                'Access-Control-Allow-Methods': 'GET,HEAD,OPTIONS,POST,PUT',
                "Access-Control-Allow-Headers": "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control,X-CSRF-Token,Authorization"
            },
            type: "POST",
            url: url,
            crossDomain: true,
            contentType: false,
            processData: false,
            data: formData,
            dataType: "json",
            success: function (response) {
                console.log(response);
                if (response.success == true) {
                    toastr.success("category add successful");
                    setTimeout(function () {
                        //window.location.href = home;
                    }, 2000);
                } else {
                    toastr.error(response.message);
                    setTimeout(function () {
                        // window.location.reload();
                    }, 2000);
                }

            },
            error: function (response, XMLHttpRequest, textStatus, errorThrown) {
                if (response.status == 422) {
                    toastr.error("All field required");
                }
                else {
                    
                    toastr.error("s");
                }
                setTimeout(function () {
                    //window.location.reload();
                }, 2000);
            }
        })
    });
});

i have installed corsheaders package in django:

    DJANGO_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'rest_framework',
    'rest_framework.authtoken',
    'verify_email.apps.VerifyEmailConfig'
    
]
    CORS_ORIGIN_ALLOW_ALL=True
CORS_ALLOW_CREDENTIALS = True

also added middleware but still getting this error. its not event hitting the api endpoint.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8888/api/v1/services/category/add/. (Reason: header ‘access-control-allow-credentials’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8888/api/v1/services/category/add/. (Reason: CORS request did not succeed).