Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

groganj89's avatar

XHR Cancelled Requests - InertiaJS

Hey all,

I hope everyone is well!

First post here so I hope it's not a stupid one!

The question, so I am pretty far into building my Inertia App using the latest Laravel and Vue3 using mostly .

I am at a point where my functions are doing Inertia posts. An example of this:

NewPerson.vue (Slide-out menu Component)

        function submit() {
            Inertia.post("customers", form, {
                onSuccess: () => {
                    Inertia.visit(`/companies/${company.id}/edit`);
                    alert("Contact Successfully Created");
                },
            });
            this.open = false;
        }

CustomersController::index - Store function

    public function store(Request $request)
    {
        Customers::create([
            'uuid' => Str::uuid(16),
            'company_id' => $request->company_id,
            'first_name' => $request->first_name,
            'last_name' => $request->last_name,
            'full_name' => $request->first_name . ' ' . $request->last_name,
            'email_address' => $request->email_address,
            'contact_number' => $request->contact_number,
            'company_name' => $request->company_name,
            'location_name' => $request->location_name
        ]);

        return redirect()->back()->with('success', 'Contact was successfully created.');
    }

specified route - web.php

 Route::post('companies/{id}/customers', [CustomersController::class, 'store']);

What I am finding is, that it seems to be doing 2 XHR requests sending the same payload but one is "canceled". My issue with this is I think this is causing duplicate data to be posted to my API which in turn is putting 2 entries into the database.

Just for some background, this is my first deep dive into inertia, In my day job, I work on a VueSPA with a laravel backend using Axios. I can surmise it's probably something I am doing wrong, but I am at a loss as to what.

Any suggestions or help will be greatly appreciated :)

Have a good day everyone and thank you for reading.

0 likes
9 replies
dericlima's avatar

Did you find the root cause of your issue? I started having the same problem today....

1 like
vmitchell85's avatar

I suspect it might be caused by the submit function being called on the page before you want it to be called. I would double check references to the submit function on any buttons or form submissions and attempt to determine if it is calling it twice when you're submitting or maybe one is happening on page load.

marcschmitt's avatar

I experienced a similar issue in which I made two successive put requests using:

router.put(url, data, options)

The first request got a status of cancelled, and the second one passed successfully. I was unable to track the issue further down, so I started using axios for the put requests:

axios.put(url[, data[, config]])

Luckily, that worked, so maybe this helps someone.

If anyone can indicate the main cause for this behavior, I would be grateful to understand it.

bretto36's avatar

I found i was using Inertia form helper. And i forgot to put @submit.prevent on my form tag.

@submit still allows the default form submission to happen in the background

2 likes
Cristian26's avatar

@bretto36 This simple solution helped me after many hours of receiving the Canceled Requests message. Thank you so much

1 like
Teodoro's avatar

I found this problem using Vue and Inertia. I have a watch on a property of a form that triggers the same request as the submit. When the submit was called, it invoked the watch and two requests were made simultaneously. Search for submit without prevent or some hide watch can solve your problem.

MurtuzaNalawala's avatar

I received the same error.

http//:stackoverflow.com/questions/77152088/http-fetch-xhr-requests-are-being-canceled-some-time-i-m-using-flutter-web-g

and it's very hard to identify the root cause.

Max100's avatar

Fwiw, moving the submit button outside the form resolved the issue for me.

Please or to participate in this conversation.