本文旨在解决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令牌的示例：
这段代码会在页面加载时执行一个立即执行函数，将当前会话的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进行文件上传的示例：
Click or drag files here to upload
在这个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保护，并避免因简单拼写错误导致的功能中断。
