在 laravel 中通过 axios (VueJS) 发布请求给出 500 错误答案

【问题标题】：Post request by axios (VueJS) in laravel giving 500 error在 laravel 中通过 axios (VueJS) 发布请求给出 500 错误
【发布时间】：2020-12-07 22:28:50
【问题描述】：

我正在尝试通过 axios 发出 post 请求，但收到此错误：app.js:285 POST http://127.0.0.1:8000/concerts/1/orders500 (Internal Server Error)

虽然订单正在处理中（我看到它即将到来的是 Stripe 和数据库）。另一个问题是重定向没有发生，因为 window.location =/orders/${response.data.confirmation_number};我只是停留在同一页面上。

有什么想法可以在这里出错吗？

<template>
<div>
    <div class="row middle-xs">
        <div class="col col-xs-6">
            {{ csrf_token}}
            <div class="form-group m-xs-b-4">
                <label class="form-label">
                    Price
                </label>
                <span class='form-control-static '>
                    ${{ priceInDollars }}
                </span>
            </div>
        </div>
        <div class="col col-xs-6">
            <div class="form-group m-xs-b-4">
                <label class="form-label">
                    Qty
                </label>
                <input type="number" v-model="quantity" class="form-control">
            </div>
        </div>
    </div>
    <div class="text-right">
        <button class="btn btn-primary btn-block"
                @click="openStripe"
                :class="{ 'btn-loading': processing }"
                :disabled="processing"
        >
            Buy Tickets
        </button>
    </div>
</div>

这是脚本部分：

<script>

export default {

    
    
    props: [
        'price',
        'concertTitle',
        'concertId',
    ],
    data() {
        return {
            quantity: 1,
            stripeHandler: null,
            processing: false,

        }
    },

    computed: {
        description() {
            if (this.quantity > 1) {
                return `${this.quantity} tickets to ${this.concertTitle}`
            }
            return `One ticket to ${this.concertTitle}`
        },
        totalPrice() {
            return this.quantity * this.price
        },
        priceInDollars() {
            return (this.price / 100).toFixed(2)
        },
        totalPriceInDollars() {
            return (this.totalPrice / 100).toFixed(2)
        },
    },
    methods: {
        initStripe() {
            const handler = StripeCheckout.configure({
                key: App.stripePublicKey
            })
            window.addEventListener('popstate', () => {
                handler.close()
            })
            return handler
        },
        openStripe(callback) {
            this.stripeHandler.open({
                name: 'TicketBeast',
                description: this.description,
                currency: "usd",
                allowRememberMe: false,
                panelLabel: 'Pay {{amount}}',
                amount: this.totalPrice,
                // image: '/img/checkout-icon.png',
                token: this.purchaseTickets,
            })
        },
        purchaseTickets(token) {
            this.processing = true
            axios.post(`/concerts/${this.concertId}/orders`, {
                email: token.email,
                ticket_quantity: this.quantity,
                payment_token: token.id,
            }).then(response => {
                window.location =`/orders/${response.data.confirmation_number}`; 
                console.log('Charge succeeded.')
            }).catch(response => {
                this.processing = false
            })
        }
    },
    created() {
        this.stripeHandler = this.initStripe()
    }
}

【问题讨论】：

标签： laravel vue.js axios

【解决方案1】：

如果你使用 Chrome 浏览器，你必须去网络标签下查看，你可以看到失败的请求响应

【讨论】：

是的，我看到了：orders - 500 -- type: xhr app.js:285 -- 不是很有帮助的消息。奇怪，但所有关于订单的测试都通过了 - 它已创建，否则数据库中将没有任何内容
点击可以看到内部消息

【解决方案2】：

问题出在 Mailer 上。在 .env 文件中，连同 Mailtrap 凭据，您必须提供发件人电子邮件，但他们不会告诉您：（这也以某种方式阻止了重定向。以防对某人有所帮助。

【讨论】：