Laravel csrf托克没有传递给拉拉维尔8的vuejs

我正在尝试使用laravel 8中的vuejs制作一个文件上传程序，为此我使用了以下meta标记：

<meta name="csrf-token" content="{{ csrf_token() }}">

test.vue中的代码（我希望上传程序可以在其中工作）：

添加新名称
名称
创建于
行动
{{item.name}
{{item.created_at}}
编辑
删去
你的名字
单击或拖动此处的文件以上载

关
{{正在添加？
'添加..'：'添加名称'}
取消
{{正在添加？
'编辑..'：'编辑名称'}

删除确认

是否确实要删除标记

删去
导出默认值{
数据（）{
返回{
数据：{
名称：“”
},              
地址：false，
编辑：错，
伊莎丁：错，
阵列：[]，
编辑数据：{
名称：“”
},
索引：-1，
showDeleteModal:false，
isDeleting:错，
删除项：{}，
删除索引：-1，
}
},
方法：{
异步addData（）{
if（this.data.name.trim（）=''）返回此.e（'name是必需的！'）
const hi=等待this.callApi（'post'，'add_data'，this.data）
如果（hi.status==201）{
this.array.unshift（hi.data）
this.s（'已成功添加名称'）
this.addname=false
this.data.name=“”
}否则{
如果（hi.status==422）{
if（hi.data.errors.name）{
this.i（hi.data.errors.name[0]）
}  
}否则{
这是smr（）
}
}
},
异步editData（）{
如果（this.edit_data.name.trim（）==''）返回此.e（'名称为
必需'）
const hi=wait this.callApi（'post'，'edit_data'，
这是一个错误（编辑数据）
如果（hi.status==200）{
this.array[this.index].name=this.edit\u data.name
this.s（'名称已成功编辑！'）
this.editmodel=false
}否则{
如果（hi.status==422）{
if（hi.edit_data.errors.name）{
this.e（hi.edit_data.errors.name[0]）
}
}否则{
这是smr（）
}
}
},
showEditModal（项目、索引）{
设obj={
id:item.id，
名称：item.name
}
this.edit_data=obj
this.editmodel=true
this.index=索引
},
异步deleteName（）{
this.isDeleting=true
const hi=wait this.callApi（'post'，'delete_data'，
此项（删除项目）
如果（hi.status==200）{
this.array.splice（this.i，1）
此.s（'已成功删除'）
}否则{
这是smr（）
}
this.isDeleting=false
this.showDeleteModal=false
},
显示删除模式（第i项）{
this.deleteItem=项目
这个。i=i
this.showDeleteModal=true
}
},
异步创建（）{
const hi=wait this.callApi（'get'，'get_data'））
如果（hi.status==200）{
this.array=hi.data
}否则{
这是smr（）
}    
}
}
.空间{
宽度：100%；
高度：5px；
}

---

您应该在发出请求时手动传递CSRF令牌。只需将以下内容推送到每个请求：

_token: document.querySelector("meta[name='csrf-token']").getAttribute("content");

---

欢迎来到SO。您是如何向ajax提出请求的——起诉axios还是fetch？显示代码以了解问题可能产生的原因。您应该共享获取帮助的代码。我已经用代码编辑了问题，感谢您直到获得错误：

export default{data（）{return{token:document.querySelector（“meta[name='csrf-token']”）。getAttribute（“content”），数据：{name:'}，

并且输入是：

我的意思是您应该将此数据传递给您的callApi的DataObjective。我很抱歉问这个问题（我是vuejs的新手）：您能告诉我应该把代码放在哪里吗？输入中有令牌，但控制台仍然返回419错误。方法callApi（）将

data:dataobject

替换为：

data:{{u-token:document.querySelector（“meta[name='csrf-token']”。getAttribute（“content”），…dataobject}

<template>
 <div>
       
    
      
        <Button type="success" @click="addname=true">Add New Name</Button>
        <table>
                <tr>
                    <td>Name</td>
                    <td>Created At</td>
                    <td>Action</td>
                </tr>
                
                <tr v-for="(item, i) in array" :key="i" v- 
                 if="array.length">   
                    <td>{{ item.name}}</td>
                    <td>{{ item.created_at}}</td>
                    <td>
                        <Button type="info" size="small" 
                         @click="showEditModal(item, i)">Edit</Button>                                  
                        <Button type="error" size="small" 
                         @click="showDeletingModal(item,i)" 
                         :loading="item.isDeleting">Delete</Button>
                    </td>
                </tr>
        </table>
     </div>    

      <!-- Add --> 

     <Modal v-model="addname" title="Add New Name" :mask-closable= "false" 
     :closable = "false" >              
            <Label>Your Name</Label>
            <Input v-model ="data.name" type="text" />
            <Upload
                multiple
                type="drag"
                action="/upload">
                <div style="padding: 20px 0">
                    <Icon type="ios-cloud-upload" size="52" style="color: 
                     #3399ff"></Icon>
                    <p>Click or drag files here to upload</p>
                </div>
            </Upload>
            <div slot="footer">
                <Button type="error" @click="addname=false">Close</Button>
                <Button type="success" @click="addData" 
                :disabled="isAdding" :loading="isAdding">{{isAdding ? 
                'Adding..' : 'Add Name'}}</Button>
            </div>
     </Modal>    

     <!-- Edit --> 

     <Modal v-model="editModal" title="Edit tag" :mask-closable= "false" 
     :closable= "false">
            <Input v-model="edit_data.name"  placeholder="Edit tag name"  
            />

            <div slot="footer">
                <Button type="default" @click="editModal= 
                false">Cancel</Button>
                <Button type="primary" @click="editData" 
                :disabled="isAdding" :loading="isAdding">{{isAdding ? 
                'Editing..' : 'Edit Name'}}</Button>
            </div>
    </Modal>

    <!-- delete alert modal -->
            
    <Modal v-model="showDeleteModal" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>Delete confirmation</span>
        </p>
        <div style="text-align:center">
            <p>Are you sure you want to delete tag?.</p>
            
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="isDeleting" 
            :disabled="isDeleting" @click="deleteName">Delete</Button>
        </div>
    </Modal> 


 </div>    
</template>



 <script> 

    export default {

       data(){
            return{
                data: {
                    name : ''
                },              
                addname : false,
                editModal : false,
                isAdding : false, 

                array: [],
                edit_data : {
                    name : ''
                },
                index : -1,
                showDeleteModal : false,
                isDeleting : false,
                deleteItem : {},
                deletingIndex : -1,
                
            }
    },



    methods: {

        async addData(){
             if(this.data.name.trim()=='') return this.e('Name is required !')
             const hi = await this.callApi('post','add_data',this.data)
             if(hi.status===201){
                 this.array.unshift(hi.data)
                 this.s('Name added successfully')
                 this.addname = false
                 this.data.name = ''
             }else{
                 if(hi.status==422){
                     if(hi.data.errors.name){
                           this.i(hi.data.errors.name[0])
                     }  
                 }else{
                     this.smr()
                 }
             }
        },

        async editData(){
            if(this.edit_data.name.trim()=='') return this.e('name is 
            required')
            const hi = await this.callApi('post', 'edit_data', 
             this.edit_data)
            if(hi.status===200){
                this.array[this.index].name = this.edit_data.name
                this.s('Name has been edited successfully!')
                this.editModal = false
            
            }else{
                if(hi.status==422){
                    if(hi.edit_data.errors.name){
                        this.e(hi.edit_data.errors.name[0])
                    }
                    
                }else{
                    this.smr()
                }
                
            }

        },

        showEditModal(item, index){
            let obj = {
                id : item.id, 
                name : item.name
            }
            this.edit_data = obj
            this.editModal = true
            this.index = index
        },

        async deleteName(){
            this.isDeleting = true
            const hi = await this.callApi('post', 'delete_data', 
            this.deleteItem)
            if(hi.status===200){
                this.array.splice(this.i,1)
                this.s('successfully Deleted')
            }else{
                this.smr()
            }
            this.isDeleting = false
            this.showDeleteModal = false
        },

        showDeletingModal(item, i){
             this.deleteItem = item
             this.i = i
             this.showDeleteModal= true
        }
        
    },



    async created(){
        const hi = await this.callApi('get','get_data')
        if(hi.status===200){
            this.array = hi.data
        }else{
            this.smr()
        }    

      }
  }

</script>



<style scoped>

  .space{
       width:100%;
       height:5px;
   }
</style>

_token: document.querySelector("meta[name='csrf-token']").getAttribute("content");