独立React项目向Laravel发POST请求遇CSRF Token Mismatch问题求助

你的问题根源很明确：独立React项目无法解析Laravel的Blade模板语法，所以{{ csrf_token() }}不会被替换成真实的token，Axios携带的是无效字符串，自然会触发 mismatch 错误。以下是几种可落地的解决方案：

方案一：从Laravel API接口获取CSRF Token #

这是最通用的方案，适合所有跨域场景：

1. 在Laravel的routes/api.php中添加一个返回CSRF Token的路由：

   Route::get('/csrf-token', function () {
       return response()->json(['csrf_token' => csrf_token()]);
   });
   

2. 在React项目中初始化Axios时，先请求该接口拿到token，再设置到请求头：

   import axios from 'axios';
   
   const axiosInstance = axios.create({
     baseURL: 'http://你的Laravel域名/api',
   });
   
   // 先获取token再初始化请求头
   axiosInstance.get('/csrf-token')
     .then(res => {
       axiosInstance.defaults.headers.common['X-CSRF-TOKEN'] = res.data.csrf_token;
     })
     .catch(err => console.error('获取CSRF Token失败:', err));
   
   export default axiosInstance;
   

3. 确保Laravel的config/cors.php配置允许React域名跨域，比如：

   'allowed_origins' => ['http://你的React域名'],
   'allowed_methods' => ['*'],
   'allowed_headers' => ['*'],
   

方案二：利用Laravel的CSRF Cookie自动传递 #

Laravel默认会把CSRF Token存入XSRF-TOKEN Cookie，跨域场景下可以直接读取这个Cookie：

1. 修改Laravel的config/cors.php，开启凭证支持：

   'supports_credentials' => true,
   

2. 在React项目中配置Axios允许携带Cookie，并从Cookie中读取token：

   import axios from 'axios';
   import Cookies from 'js-cookie'; // 先安装依赖：npm install js-cookie
   
   const axiosInstance = axios.create({
     baseURL: 'http://你的Laravel域名/api',
     withCredentials: true, // 允许跨域携带Cookie
   });
   
   // 从Cookie中获取XSRF-TOKEN
   const csrfToken = Cookies.get('XSRF-TOKEN');
   if (csrfToken) {
     axiosInstance.defaults.headers.common['X-XSRF-TOKEN'] = csrfToken;
   }
   
   export default axiosInstance;
   

   注：Laravel会自动识别X-XSRF-TOKEN请求头，对应Cookie中的XSRF-TOKEN值，无需额外配置。

方案三：开发环境临时用环境变量（不推荐生产） #

适合本地开发快速测试：

1. 在Laravel项目中打印出csrf_token()的真实值（比如在任意Blade页面输出{{ csrf_token() }}）。
2. 把这个值复制到React项目的.env文件中：

   REACT_APP_LARAVEL_CSRF_TOKEN=你的真实CSRF Token值
   

3. 在React的Axios配置中直接使用该环境变量：

   import axios from 'axios';
   
   const axiosInstance = axios.create({
     baseURL: 'http://你的Laravel域名/api',
     headers: {
       'X-CSRF-TOKEN': process.env.REACT_APP_LARAVEL_CSRF_TOKEN
     }
   });
   
   export default axiosInstance;
   

   缺点：生产环境CSRF Token会动态变化，此方案仅适合开发临时用。

内容的提问来源于stack exchange，提问作者user19163958