I am trying to use the datatable as a server side but encountered error "The GET method is not supported for this route. Supported methods: POST.". I already tried all the solutions I've found but unfortunately it didn't work.

View

<table id="loan-details-table" class="table table-striped table-bordered table-sm">
    <thead class="thead-global">
    </thead>
    <tbody></tbody>
</table>
<script type="text/javascript">
    //function in calling datatable ajax
    function getGeneratedLoanDetails(){
        var table = $('#loan-details-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '/configurations/penalties/getGeneratedLoanDetails/',
                dataType: "json",
                type: "POST",
                data:{ _token: "{{csrf_token()}}"}
            },
            columns: [ 
                { data: '#' },
                { data: 'number' },
                { data: 'name' },
                { data: 'date_granted' },
                { data: 'current_date' },
                { data: 'no_of_days' },
                { data: 'daily_amortization_amount' },
                { data: 'total_amortization_amount' },
                { data: 'total_amount_paid' },
                { data: 'difference' },
                { data: 'days_delay' },
                { data:  'interest_rate'},
                { data:  'penalty_amount'},
                { data: 'action' }
            ]
        });
    }

    $(document).ready(function(){
        //datatable ajax
        setTimeout(
        function() 
        {
            getGeneratedLoanDetails();
        }, 500);
    })
    
</script>

Web

Route::post('/configurations/penalties/getGeneratedLoanDetails/', 'Penalty\PenaltyController@getGeneratedLoanDetails');

Question: Why Im encountering this error even tho I already declared it in my view & route as POST?