Question

我正在尝试通过axios发出发布请求，但收到此错误：app.js：285 POST http://127.0.0.1:8000/concerts/1/orders 500（内部服务器错误）

虽然订单正在处理中（我看到订单是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()
    }
}

Answer 1

如果您使用的是Chrome浏览器，则必须转到“网络”标签下，然后才能看到失败的请求响应

Answer 2

问题出在Mailer。在.env文件中，必须连同Mailtrap凭据一起提供发件人电子邮件，它们不会告诉您:(这也以某种方式阻止了重定向。以防万一。

在laravel中发布axios（VueJS）的请求给500错误

2 个答案: