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

Posted 2023-03-14

【中文标题】使用axios发送ajax请求时如何添加token？

【英文标题】：How to add token when using axios to send an ajax request?

【发布时间】：2017-04-10 01:21:13

【问题描述】：

我正在使用 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 

我该怎么办？

【参考方案1】：

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

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

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

因此，这将设置 csrf 令牌。我不认为这就是你设置 Auth 令牌的方式，所以你可能只需要看看你为什么打电话给window.AUTH_TOKEN

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

【讨论】：

我对laravel不太了解，我们需要使用JSON.parse("<?php echo ...?>")而不是<?php echo ...?>吗？

echo json_encode() 会将 php 数组转换为输出 JSON 对象，因此可以正常工作。这里的问题似乎很简单，AUTH_TOKEN 没有在任何地方设置。我给出了这个脚本标签作为示例，如果全局 js 变量需要服务器端解析，如何在 Laravel 中设置它们。

啊！我在上一条评论中一直使用这种方法，从没想过输出的 json 字符串已经是有效的 javascript 对象文字...

【参考方案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>

部分