javascript - 类型错误：res.response 未定义

Question

我正在使用 Vue/Laravel 在 SPA 中使用 JWT auth 进行用户身份验证。我的注册模块有问题，当我单击按钮时它没有做任何事情，我检查了 Firefox 开发者版的控制台，它抛出了以下错误：

类型错误：res.response 未定义

这是我的代码

<template>
<div class="container">
    <div class="card card-default">
        <div class="card-header">Inscription</div>
        <div class="card-body">
            <div class="alert alert-danger" v-if="has_error && !success">
                <p v-if="error == 'registration_validation_error'">Error</p>
                <p v-else>Try again later.</p>
            </div>
            <form autocomplete="off" @submit.prevent="register" v-if="!success" method="post">
                <div class="form-group" v-bind:class="{ 'has-error': has_error && errors.email }">
                    <label for="email">E-mail</label>
                    <input type="email" id="email" class="form-control" placeholder="[e-mail]" v-model="email">
                    <span class="help-block" v-if="has_error && errors.email">{{ errors.email }}</span>
                </div>
                <div class="form-group" v-bind:class="{ 'has-error': has_error && errors.password }">
                    <label for="password">Mot de passe</label>
                    <input type="password" id="password" class="form-control" v-model="password">
                    <span class="help-block" v-if="has_error && errors.password">{{ errors.password }}</span>
                </div>
                <div class="form-group" v-bind:class="{ 'has-error': has_error && errors.password }">
                    <label for="password_confirmation">Confirm password</label>
                    <input type="password" id="password_confirmation" class="form-control" v-model="password_confirmation">
                </div> <button type="submit" class="btn btn-default" @click="register">Inscription</button>
            </form>
        </div>
    </div>
</div>
</template>
<script>
    export default {
        data() {
            return {
                name: '',
                email: '',
                password: '',
                password_confirmation: '',
                has_error: false,
                error: '',
                errors: {},
                success: false
            }
        },
        methods: {
            register() {
                var app = this
                this.$auth.register({
                    data: {
                        email: app.email,
                        password: app.password,
                        password_confirmation: app.password_confirmation
                    },
                    success: function () {
                        app.success = true
                        this.$router.push({
                            name: 'Login',
                            params: {
                                successRegistrationRedirect: true
                            }
                        })
                    },
                    error: function (res) {
                        console.log(res.response.data.errors)
                        app.has_error = true
                        app.error = res.response.data.error
                        app.errors = res.response.data.errors || {}
                    }
                })
            }
        }
    }
</script>

如果这给出了某种提示，我在控制台中也会有这个警告：

原因：CORS 请求未成功

我不知道为什么会这样。

标签： javascriptlaravelvue.js

Answer 1

您遇到了 CORS 错误，这意味着您正在向其发出请求的服务器不允许来自您的客户端域的请求。如果您拥有服务器，则需要将您的域添加到允许的域列表中，或者如果这失败，请检查请求方法“POST”是否被允许。

看起来您会收到“res.response”错误，因为当错误被错误函数捕获时，它会返回一条没有“response”属性的错误消息。尝试控制台记录“ res”响应以查看它为您提供了什么，并从那里调整您正在使用的属性。