React+Laravel项目调用Sanctum接口触发CORS跨域错误如何解决？

问题原因 #

当前你的React应用运行在http://localhost:3000，但Laravel后端的CORS策略只配置了放行http://localhost:4200，所以跨域请求被浏览器拦截。

解决步骤 #

1. 调整Laravel CORS配置 #

打开Laravel项目下的config/cors.php文件，修改两个配置项：

• 确保paths项包含sanctum/*，让Sanctum相关接口应用CORS规则：

'paths' => ['api/*', 'sanctum/*'],

• 修改allowed_origins项，添加React运行地址：

// 开发环境可以临时使用全放开，生产环境建议写死具体地址
'allowed_origins' => ['http://localhost:3000', 'http://127.0.0.1:3000'],

2. 调整Laravel Sanctum配置 #

打开Laravel项目下的config/sanctum.php，修改stateful配置项，添加React的运行地址：

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    '%s%s',
    'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
    env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
))),

如果你的.env文件中存在SANCTUM_STATEFUL_DOMAINS或者CORS_ALLOWED_ORIGINS配置，也需要同步修改为对应值。

3. 刷新Laravel配置缓存 #

在Laravel项目根目录运行命令：

php artisan config:clear

配置更新后重启Laravel服务和React开发服务即可解决问题。

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