React与Laravel基于Http-only Cookie的安全连接及Token存储方案咨询

嘿，我来一步步帮你搞定这个问题——用Http-only Cookie在React和Laravel之间实现安全的身份验证，彻底告别localStorage存token的风险！这绝对是目前最安全的方案之一，毕竟Http-only Cookie能完美避开XSS攻击的威胁，还不用你手动管理token的携带逻辑。

一、先搞定Laravel后端的核心配置 #

后端是重头戏，得先让Laravel支持状态化的前端请求，并且正确发送Http-only Cookie。

1. 配置CORS允许携带凭证 #

打开config/cors.php，修改这几个关键参数：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000'], // 换成你的React前端域名，生产环境别用*
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true, // 这个必须设为true，不然浏览器不会带Cookie
];

2. 用Laravel Sanctum实现状态化验证 #

Sanctum是Laravel官方的轻量身份验证工具，专门适配前端SPA的场景，能自动帮你处理Http-only Cookie：

• 先安装Sanctum：

composer require laravel/sanctum

• 发布迁移和配置文件：

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

• 运行迁移创建会话相关表：

php artisan migrate

• 打开app/Http/Kernel.php，在$middlewareGroups['api']里加入Sanctum的中间件，让API路由支持状态化请求：

'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

3. 编写登录接口 #

登录成功后，Laravel会自动给前端发送Http-only的会话Cookie，不需要你手动生成token：

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class LoginController extends Controller
{
    public function login(Request $request)
    {
        // 验证登录凭证
        $validated = $request->validate([
            'email' => 'required|email',
            'password' => 'required|string',
        ]);

        // 尝试登录
        if (!Auth::attempt($validated)) {
            return response()->json(['message' => '邮箱或密码错误'], 401);
        }

        // 登录成功，返回用户信息即可，Cookie由Laravel自动处理
        return response()->json([
            'user' => Auth::user(),
            'message' => '登录成功'
        ]);
    }

    public function logout(Request $request)
    {
        Auth::logout();
        $request->session()->invalidate();
        $request->session()->regenerateToken();

        return response()->json(['message' => '退出成功']);
    }
}

二、React前端的配置与请求处理 #

前端这边主要是确保请求能正确携带Cookie，并且处理好登录的前置步骤。

1. 全局配置请求携带凭证 #

如果你用Axios，直接全局设置，省得每个请求都写：

import axios from 'axios';

// 配置基础API地址
axios.defaults.baseURL = 'http://your-laravel-domain/api';
// 关键：允许携带凭证，浏览器会自动带上Http-only Cookie
axios.defaults.withCredentials = true;

如果用Fetch，每个请求都要加credentials: 'include'：

fetch('/api/user', {
  method: 'GET',
  credentials: 'include' // 必须加这个
})

2. 处理登录流程（先拿CSRF令牌！） #

Laravel要求前端请求需要CSRF令牌，所以登录前得先请求/sanctum/csrf-cookie获取令牌：

const handleLogin = async (formData) => {
  try {
    // 第一步：获取CSRF令牌，这一步会设置CSRF Cookie
    await axios.get('/sanctum/csrf-cookie');
    
    // 第二步：发送登录请求
    const res = await axios.post('/login', formData);
    
    // 登录成功后的逻辑，比如跳转到首页、存用户信息到状态
    console.log('登录成功', res.data.user);
  } catch (err) {
    console.error('登录失败', err.response.data.message);
  }
};

3. 验证登录状态（自动携带Cookie） #

后续请求用户信息或者其他需要权限的接口时，浏览器会自动带上Http-only Cookie，Laravel会自动验证身份：

const fetchCurrentUser = async () => {
  try {
    const res = await axios.get('/user');
    return res.data;
  } catch (err) {
    // 401状态码说明未登录，跳转到登录页
    if (err.response.status === 401) {
      window.location.href = '/login';
    }
    throw err;
  }
};

三、为什么Http-only Cookie比localStorage安全？ #

敲黑板！这一点必须搞清楚：

• 防XSS攻击：Http-only Cookie无法被JavaScript读取，就算你的React页面有XSS漏洞，攻击者也拿不到凭证；而localStorage里的token是可以被任意JS脚本读取的，风险极高。
• 自动管理：浏览器会自动在符合条件的请求里携带Cookie，不用你手动把token塞进请求头，减少出错概率，也不用维护token的存储逻辑。

四、额外的安全加固建议 #

• 生产环境必须用HTTPS：明文HTTP下Cookie可能被中间人窃取，HTTPS能加密传输，保障安全。
• 配置SameSite属性：在config/session.php里设置'same_site' => 'strict'，防止CSRF攻击（Sanctum已经有CSRF保护，双重保险更安心）。
• 合理设置Cookie过期时间：在config/session.php里调整'lifetime'参数，比如设为120（分钟），根据业务需求平衡安全性和用户体验。

这样一套配置下来，你就完全不需要在React里用localStorage存token了，身份验证全靠浏览器和Laravel自动处理，安全又省心！

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