使用Laravel Sanctum时，ReactJS应用存储令牌的最优方案咨询

针对你提到的跨域React SPA与Laravel Sanctum搭配的令牌存储问题，最优方案是利用Laravel Sanctum原生支持的HttpOnly Cookie认证机制，彻底规避localStorage的XSS风险，具体实现步骤和注意事项如下：

一、核心方案：HttpOnly Cookie存储认证令牌 #

Laravel Sanctum专为SPA设计了Cookie-based认证流程，这种方式的核心优势是：HttpOnly Cookie无法被前端JS读取，从根源上避免XSS攻击窃取令牌的风险，同时配合Sanctum的CSRF防护机制抵御CSRF攻击。

后端配置步骤 #

1. 配置状态域与会话域
   在.env文件中设置：

SANCTUM_STATEFUL_DOMAINS=your-react-app-domain.com # 开发环境可填localhost:3000
SESSION_DOMAIN=.your-root-domain.com # 跨域场景下设为根域名，确保Cookie可跨子域共享
SESSION_DRIVER=cookie

2. 开启CORS凭据支持
   在config/cors.php中设置：

'allow_credentials' => true,
'allowed_origins' => ['https://your-react-app-domain.com'], // 明确指定React应用域名

3. 确保Sanctum中间件启用
   在app/Http/Kernel.php的api中间件组中包含：

\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,

前端配置步骤 #

1. 请求携带凭据
   使用Axios的话，全局配置：

import axios from 'axios';

axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'https://your-laravel-api-domain.com';

使用Fetch API的话，每次请求添加：

fetch('/api/user', {
  credentials: 'include'
});

2. 获取CSRF令牌
   在React应用初始化时，先请求Sanctum的CSRF端点：

axios.get('/sanctum/csrf-cookie');

之后再发起登录请求，确保CSRF令牌被正确设置到Cookie中。

二、备选方案：内存存储+HttpOnly刷新令牌（仅特殊场景使用） #

如果因业务限制无法使用Cookie认证，可采用：

• 将访问令牌存储在React内存中（比如Context、Redux状态或组件状态），页面刷新后需用户重新登录或通过刷新令牌获取新的访问令牌。
• 把刷新令牌存储在HttpOnly Cookie中，后端提供刷新令牌接口，前端在访问令牌过期时调用该接口获取新令牌。

这种方案的缺点是页面刷新后会丢失访问令牌，需要额外处理重新登录逻辑，安全系数也低于Cookie方案。

关键安全注意事项 #

• 必须开启HTTPS：确保Cookie的Secure属性生效，防止令牌在传输过程中被窃取。
• 合理设置Cookie的SameSite属性：跨域场景下设置为Lax或None（需配合Secure），避免浏览器拦截Cookie。
• 严格限制CORS的allowed_origins：避免未授权域名发起请求。

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