Vue JS HTTP post to API status code 0 redirects to question mark

Question

I am having some issue with an HTTP post to my own API.

Scenario

I have a form build within a Vue component. The form is for a quotation request.

Whenever the post passes I want to redirect the webapp to the thanks URL. Locally the form submits fine and redirects to the correct URL.

On the server I am getting a HTTP status code of 0 without status text in javascript. So the .then() the function is totally ignored. The post request, however, passes completely. I am sending an e-mail right before I return JSON to the post. And that e-mail sends perfectly fine.

The problem is now, what is possibly going wrong!

What I've tried

• changing the .then() to .done()
• only sending the e-mail without the whole eloquent database insertion. all worked locally but not on the server.

Code

Code of my controller function (the creation makes the rows in the database) :

    public function send(Request $request)
{
    $this->validate($request, [
        'companyname' => 'required',
        'address'     => 'required',
        'address2'    => 'required',
        'postalcode'  => 'required',
        'city'        => 'required',
        'country'     => 'required',
        'initials'    => 'required',
        'lastname'    => 'required',
        'email'       => 'required',
        'telephone'   => 'required',
    ]);

    $quotation = Quotation::create([
        'company_name' => $request->companyname,
        'address'      => $request->address,
        'address2'     => $request->address2,
        'city'         => $request->city,
        'country'      => $request->country,
        'postalcode'  => $request->postalcode,
        'debtor_code'  => $request->debtor_code,
        'gender'       => $request->gender == 'male' ? 'M' : 'F',
        'initials'     => $request->initials,
        'firstname'    => $request->firstname,
        'lastname'     => $request->lastname,
        'email'        => $request->email,
        'telephone'    => $request->telephone,
        'vat'          => $request->vat ?: null
    ]);


    $attachments = collect();

    collect($request->json('products'))->each(function ($data) use ($quotation, $attachments) {
        $product = $quotation->products()->create([
            'quotation_id'         => $quotation->id,
            'description'          => $data['description'],
            'house_formulation'    => $data['formulation_type'] == "house_formulation" ? true : false,
            'own_formulation'      => $data['formulation_type'] == "own_formulation" ? true : false,
            'formulation_text'     => $data['formulation'],
            'product_kind'         => $data['product_kind'],
            'packaging_kind'       => $data['packaging_kind'],
            'packaging_content'    => $data['packaging_content'],
            'product_quantity'     => $data['product_quantity'],
            'delivery_time'        => $data['delivery_time'],
            'remarks'              => $data['remarks']
        ]);

        $formulationBlob = base64_decode(substr(strstr($data['formulation_document'], ','), 1));
        $product->setDocument($data['formulation_filename'], $formulationBlob);

        if($data['formulation_document']){
            $attachments->push([
                'product'   =>  $product->id,
                'file'      =>  asset("storage/{$product->document->path}"),
                'options' => []
            ]);
        }
    });

    Mail::to('[email protected]')->send(new QuotationRequest($quotation, $attachments));

    return response()->json([
        'status' => 'OK',
    ], 200);
}

Code of the vue-resource post :

submitRequest() {
            this.$http.post('/quotation-request', {
                products: this.products,
                debtor_code: this.debtor_code,
                address: this.address,
                address2: this.address2,
                postalcode: this.postalcode,
                city: this.city,
                country: this.country,
                vat: this.vat,
                gender: this.gender,
                initials: this.initials,
                firstname: this.firstname,
                lastname: this.lastname,
                email: this.email,
                telephone: this.telephone,
                companyname: this.companyname,
            }).then(request => {
                //THIS SHOULD FIRE. BUT WE IGNORE THE THEN FUNCTION.
                window.location = '/quotation-request/thanks';
            }, (response) => {
                console.log(response);
                if (response.status == 422) {
                    this.errors.record(response.body);
                    bootbox.alert("Er ging iets fout! zijn alle velden ingevuld? <br><br>Klik op de knop 'Edit quotation request' om terug te gaan naar het formulier");
                } else {
                    bootbox.alert("Er ging iets goed fout. Neem contact op met de systeembeheerder !")
                }
            });
        },

And in my console the code is 0 without statustext

The network tab shows :

Answer 1

The problem was that i had 2 forms on the page. The second form showing for the overview where the submit was happening didn't have the @submit.prevent attribute added..