Api call using ajax on admin page returns invalid form key

i’m trying to do an api call using ajax on admin page, but it keeps returning “Invalid form key”

<script type="text/javascript">
require([
    "jquery"
], function ($){

    let url = window.location.href;
    url = url.split('/');
    url = url.slice(2,4);
    url = url.join('/');

    console.log("URL -> "+(url+"/rest/V1/orders"));


    $('#button').on('click', function(){
        $.ajax({
            url: url+"/rest/V1/orders",
            data: {
                "entity":{
                    "entity_id": <?php echo $order_id; ?>,
                    "status":"processing",
                    "state":"processing"
                }
            },
            type: 'POST',
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer "+ '" + <?php echo $token; ?> + "'
            },
            success: function(response){
                console.log(response);
            },
            error: function (xhr, status, errorThrown) {
                console.log('Error happens. Try again.');
            }
        });
    });

});

Tried this way, but also didn’t work.

<script>
             var settings = {
             // "url": "http://"+url+"/rest/V1/orders",
             "url": url+"/rest/V1/orders",
             "method": "POST",
             "timeout": 0,
             "headers": {
               "Content-Type": "application/json",
               "Authorization": "Bearer "+token
             },
             "data": JSON.stringify(
                 {
                     "entity":{
                         "entity_id": order_id,
                         "status":"processing",
                         "state":"processing"
                     }
                 }
             ),
           };
           jQuery.ajax(settings).done(function (response) {
             console.log(response);
           });