php - Vue JS HTTP post 到 API 状态代码 0 重定向到问号

Question

我在向自己的 API 发送 HTTP 消息时遇到一些问题。

场景

我在 Vue 组件中构建了一个表单。该表格用于报价请求。

每当帖子通过时，我都想将网络应用程序重定向到感谢 URL。在本地，表单提交正常并重定向到正确的 URL。

在服务器上，我得到的 HTTP 状态代码为 0，而 JavaScript 中没有状态文本。因此 .then() 函数被完全忽略。然而，post 请求完全通过。我将在将 JSON 返回到帖子之前发送一封电子邮件。该电子邮件发送得非常好。

现在的问题是，可能出了什么问题!

我尝试过的

• 将 .then() 更改为 .done()
• 仅发送电子邮件，而不插入整个 eloquent 数据库。所有这些都在本地工作，但不在服务器上工作。

代码

我的 Controller 函数的代码(创建使数据库中的行):

    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('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01646c60686d416c60686d2f626e6c" rel="noreferrer noopener nofollow">[email protected]</a>')->send(new QuotationRequest($quotation, $attachments));

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

vue-resource 帖子的代码:

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 !")
                }
            });
        },

在我的控制台中，代码为 0，没有状态文本

网络选项卡显示:

Answer 1

问题是我的页面上有 2 个表单。显示提交发生位置概览的第二个表单没有添加 @submit.prevent 属性..