Question

我正在使用Laravel 5.3和vue.js 2.0，
我使用axios（https://github.com/mzabriskie/axios）发送ajax请求，
我按照文档设置TOKEN就像这样：

<script>

    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;  //The error is at this line.

    new Vue({
        el: "#app",
        data: function () {
            return {
                items: []
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                axios.get('/articles').then(function (response) {
                    response.data.forEach(function (item) {
                        item.selected = false;
                    });
                    this.items = response.data;
                }).catch(function (error) {

                    console.log(error);
                });
            });
        }
    });
</script>

控制台中的错误是这样的：

Uncaught ReferenceError: AUTH_TOKEN is not defined

我该怎么办？

Answer 1

你在窗口上设置了AUTH_TOKEN吗？如果不是window.AUTH_TOKEN，则自然不会定义。

laravel应用程序头部的常见设置是：

<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>

因此，这将设置csrf标记。我不会想象你是如何设置一个Auth令牌所以你可能只需要调查你打电话的原因window.AUTH_TOKEN

根据您生成令牌的方式，取决于您需要的类型，但是一旦您拥有它，您可能需要查看vuex来存储它。这样做可以让您在整个应用程序中访问它，而无需在窗口上存储任何内容。

Answer 2

应该是

axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')

您可以删除

<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>

部分

使用axios发送ajax请求时如何添加令牌？

2 个答案: