Api call using ajax on admin page returns invalid form key

Question

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);
           }); 

update So i found out that, the token string parse was wrong, i fixed it, but know my problem is other, its returning Bad Request, Decoding error: \nUnable to unserialize value. Error: Syntax error...

So i created another question: Ajax api call returning Bad Request decoding error

Answer 1

I don't know how much this will help you but try passing form_key: window.FORM_KEY in your data part

Thanks

Answer 2

You need to add form_key to the data you upload data:

{
                     ""form_key"": window.FORM_KEY
                ""entity"":{
                    ""entity_id"": <?php echo $order_id; ?>,
                    ""status"":""processing"",
                    ""state"":""processing""
                }
            },