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

Question

我在使用 HTTP post 到我自己的 API 时遇到一些问题。

场景

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

每当 post 通过时，我想将 webapp 重定向到感谢 URL。在本地，表单提交正常并重定向到正确的 URL.

在服务器上，我在 javascript 中得到一个没有状态文本的 HTTP 状态代码 0。所以 .then() 函数被完全忽略了。但是，post 请求完全通过。我在 return JSON 之前发送 e-mail 到 post。 e-mail 发送得非常好。

现在的问题是，可能是哪里出了问题！

我试过的

将 .then() 更改为 .done()
只发送 e-mail 而没有整个 eloquent 数据库插入。全部在本地工作，但在服务器上不工作。

代码

我的控制器函数代码（创建在数据库中生成行）：

    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('sales@cobeco-privatelabel.nl')->send(new QuotationRequest($quotation, $attachments));

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

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

并且在我的控制台中代码是 0 没有 statustext

网络选项卡显示：

Answer 1

可能有多种原因导致您获得 status: 0 之类的 403、503，您应该查看 Chrome DevTools 中的“网络”选项卡，以了解真实的响应状态。

Answer 2

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

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

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

php

laravel

vue.js

vue-resource

场景

我试过的

代码