在Laravel 11单页应用中使用React Uploady实现文件上传（CSRF问题）

嘿，我之前也碰到过一模一样的419错误，咱们一步步来把这个问题搞定～

先理下你的情况：你已经有一个基于Laravel 11的SPA搭配React运行完全正常，现在新建了个开发用的React应用，想用Uploady做文件上传，结果碰上个419响应——这在Laravel里基本就是CSRF令牌验证失败的信号。

问题根源拆解 #

419错误大多是因为前端没正确传递Laravel要求的CSRF令牌，或者请求格式不对。你的Uploady配置里已经开了withCredentials={true}（这个是对的，跨域请求必须带Cookie），但还缺了关键的CSRF令牌头，而且文件上传的Content-Type也配错了。

具体解决步骤 #

1. 先把Laravel端的配置捋顺

• 打开config/sanctum.php，把你的前端开发域名（比如http://localhost:3000，看你React应用的运行端口）加到stateful数组里，确保Sanctum认可这个跨域来源。
• 检查config/cors.php，把supports_credentials设为true，这样浏览器才允许跨域请求携带Cookie。
• 确认.env文件里的SESSION_DOMAIN和SANCTUM_STATEFUL_DOMAINS配置正确，本地开发直接设成localhost就行。

2. 修正React Uploady的前端配置

首先，我们需要从Laravel设置的XSRF-TOKEN Cookie里拿到令牌值，然后放到请求头里。推荐用js-cookie库来简化Cookie获取，先安装它：

npm install js-cookie
# 或者用yarn
yarn add js-cookie

然后修改你的Uploady组件配置，重点改这两处：

• 把Content-Type改成multipart/form-data（文件上传必须用这个格式，之前的application/json只适合传纯JSON数据）
• 添加X-XSRF-TOKEN请求头，带上Cookie里的令牌值

修改后的代码示例：

import Cookies from 'js-cookie';

function App() { 
// 你的其他业务代码...

<Uploady
        multiple={false} 
        autoUpload={true}
        inputFieldName={'file'} 
        forceJsonResponse={true} 
        withCredentials={true}
        debug={true}
        destination={{ 
            url: 'http://localhost:8080/api/v1/uploads', 
            headers: {
                'Content-Type': 'multipart/form-data',
                'Accept': 'application/json; charset=UTF-8',
                'Referrer-Policy': 'strict-origin-when-cross-origin',
                'Cache-Control': 'no-cache',
                'X-Requested-With': 'XMLHttpRequest',
                // 关键：添加CSRF令牌头，注意要解码Cookie值
                'X-XSRF-TOKEN': decodeURIComponent(Cookies.get('XSRF-TOKEN'))
            }, 
            // 你的params参数...
        }}
>
  {/* 你的上传按钮或预览组件 */}
</Uploady>

额外排查小技巧 #

如果还是不行，打开浏览器开发者工具的Network标签，查看上传请求：

• 检查Request Headers里有没有X-XSRF-TOKEN，值和Cookie里的XSRF-TOKEN是否一致（Cookie里的令牌是编码过的，所以必须用decodeURIComponent解码）
• 查看Laravel的日志文件storage/logs/laravel.log，里面会有更详细的错误原因，比如令牌缺失还是不匹配

备注：内容来源于stack exchange，提问作者Les