本文旨在解决Laravel与Vue.js集成时常见的CSRF令牌配置错误，特别是由于函数名拼写错误`csfr_token()`导致的`Undefined function`问题。我们将详细阐述如何在Blade模板中正确暴露CSRF令牌给前端JavaScript，并在Vue组件中通过HTTP请求头使用它，确保应用程序的安全性和功能正常运行。
理解Laravel中的CSRF保护
跨站请求伪造（CSRF）是一种恶意攻击，它诱导用户在不知情的情况下执行他们已认证的Web应用程序中的操作。Laravel框架内置了强大的CSRF保护机制，通过为每个用户会话生成一个唯一的“令牌”来防止此类攻击。当用户提交表单或发起AJAX请求时，Laravel会验证请求中是否包含有效的CSRF令牌。如果令牌缺失或不匹配，请求将被拒绝。
在Laravel中，我们通常使用csrf_token()辅助函数来生成并获取当前的CSRF令牌。这个令牌需要被包含在所有POST、PUT、PATCH和DELETE请求中。
将CSRF令牌暴露给前端JavaScript
对于使用JavaScript框架（如Vue.js）进行前端开发的Laravel应用，我们需要将CSRF令牌从Blade模板传递到前端JavaScript环境中。一种常见且推荐的做法是在全局window对象上设置一个属性来存储这个令牌。
立即学习“前端免费学习笔记（深入）”；
以下是在Blade模板（例如welcome.blade.php）中正确配置CSRF令牌的示例：
<script>
(function () {
window.Laravel = {
csrfToken: '{{ csrf_token() }}' // 注意：这里是 csrf_token()
};
})();
</script>这段代码会在页面加载时执行一个立即执行函数，将当前会话的CSRF令牌赋值给window.Laravel.csrfToken。这样，前端的Vue组件或其他JavaScript代码就可以方便地访问到这个令牌。
常见的拼写错误及其影响
在实际开发中，一个非常常见的错误是将csrf_token()误写为csfr_token()。这个细微的拼写错误会导致Laravel抛出Symfony\Component\Debug\Exception\FatalThrowableError Call to undefined function csfr_token()的致命错误。这是因为csfr_token()函数在Laravel中并不存在，从而导致PHP无法找到并执行该函数。
一旦出现这种错误，整个Blade视图的渲染过程就会中断，页面将无法正常显示，并且会明确指出是welcome.blade.php文件中的该函数调用导致的问题。
在Vue组件中使用CSRF令牌
获取到CSRF令牌后，前端Vue组件在发起需要CSRF保护的HTTP请求时，需要将此令牌包含在请求头中。通常，这通过X-CSRF-TOKEN或X-XSRF-TOKEN头来实现。Laravel默认检查X-CSRF-TOKEN。
以下是一个Vue组件中使用window.Laravel.csrfToken进行文件上传的示例：
<template>
<Modal
v-model="addModal"
title="Add Category"
:mask-closable="false"
:closable="false"
>
<Input v-model="data.tagName" placeholder="Add Category Name" style="width: 300px" />
<div class="space"></div>
<Upload
type="drag"
:headers="{'x-csrf-token' : token}" // 使用从window对象获取的令牌
action="/app/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="default" @click="addModal = false">Close</Button>
<Button type="primary" @click="addTag" :disabled="isAdding" :loading="isAdding">{{isAdding ? 'Adding..' : 'Add Tag'}}</Button>
</div>
</Modal>
</template>
<script>
export default {
data() {
return {
addModal: false,
data: {
tagName: ''
},
isAdding: false,
token: window.Laravel.csrfToken // 在组件数据中引用全局令牌
}
},
methods: {
addTag() {
// 示例方法，实际的添加标签逻辑
console.log('Adding tag:', this.data.tagName);
this.isAdding = true;
// 假设这里会发起一个POST请求，请求头中已包含CSRF令牌
setTimeout(() => {
this.isAdding = false;
this.addModal = false;
}, 1000);
}
}
}
</script>在这个Vue组件中：
- token: window.Laravel.csrfToken 将全局可用的CSRF令牌赋值给组件的token数据属性。
- Upload组件的:headers属性绑定了一个对象，其中'x-csrf-token'键的值就是我们从window.Laravel.csrfToken获取到的令牌。这样，每次文件上传请求都会自动带上正确的CSRF令牌。
总结与注意事项
- 严格检查拼写： 确保在Blade模板中使用csrf_token()而不是csfr_token()。这是最常见的错误源。
- CSRF保护的重要性： 始终在所有修改数据的非GET请求中包含CSRF令牌，以保护您的应用程序免受恶意攻击。
- 前端框架集成： 无论是Vue、React还是其他前端框架，通过全局对象（如window.Laravel）将CSRF令牌暴露给前端是一种标准且安全的方法。
- 官方文档： 在遇到不确定问题时，查阅Laravel官方文档是解决问题的最佳途径。官方文档详细说明了CSRF保护的机制和正确的使用方法。
通过遵循这些最佳实践，您可以有效地在Laravel和Vue.js应用程序中实现CSRF保护，并避免因简单拼写错误导致的功能中断。
