Laravel Breeze+Docker+React用户注册请求遭客户端拦截求助

1. 排查浏览器客户端拦截 #

• 禁用所有浏览器扩展（AdBlock、uBlock Origin、隐私类插件等），重新测试POST请求。net::ERR_BLOCKED_BY_CLIENT绝大多数是插件误判拦截，尤其是register这类接口容易被广告拦截器标记。
• 用无痕模式测试，快速排除扩展干扰。

2. 确认Breeze注册路由正确性 #

• Laravel Breeze默认注册路由为POST /register，属于web路由，不要改用/api/register或自定义路径，保持原生路由即可。
• 执行sail php artisan route:list确认路由时，注意该路由带web中间件，包含CSRF验证规则——后续请求必须携带CSRF令牌。

3. 适配React前端的CSRF与跨域配置 #

若React与Laravel分端口运行（比如React在3000，Laravel Sail在80），需处理以下配置：

• CSRF令牌传递：
  1. 在Laravel的blade模板（如resources/views/layouts/app.blade.php）中添加meta标签输出令牌：

     <meta name="csrf-token" content="{{ csrf_token() }}">
     

  2. React请求时，将令牌放入请求头：

     const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
     fetch('http://0.0.0.0:80/register', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
         'X-CSRF-TOKEN': csrfToken
       },
       body: JSON.stringify({
         name: '测试用户',
         email: 'test@example.com',
         password: 'password',
         password_confirmation: 'password'
       })
     });
     

• 跨域配置：
  1. 打开config/cors.php，修改paths包含注册路由：

     'paths' => ['api/*', 'register', 'login', 'logout'],
     

  2. 设置allowed_origins为前端地址（如http://localhost:3000），临时测试可设为['*']：

     'allowed_origins' => ['http://localhost:3000'],
     

  3. 重启Sail容器生效：sail down && sail up -d

4. 验证后端路由可用性 #

用curl直接发送POST请求，排除前端问题：

sail curl -X POST http://localhost/register \
  -H "Content-Type: application/json" \
  -H "X-CSRF-TOKEN: $(sail php artisan tinker --execute="echo csrf_token();")" \
  -d '{"name":"Test User","email":"test@example.com","password":"password","password_confirmation":"password"}'

若请求返回成功响应（如跳转首页或JSON成功信息），说明后端无问题，故障点在前端请求配置或浏览器插件。

5. 检查Sail网络配置 #

• 执行sail ps确认laravel.test容器端口映射为0.0.0.0:80->80/tcp，确保前端能访问该端口。
• 若前端也在Docker中运行，需将其加入Sail默认网络sail，在前端docker-compose.yml中添加network_mode: sail。

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