如何在移动端访问localhost？Laravel+React应用后端数据无法加载

1. 修正API请求地址配置 #

React前端调用Laravel API时，不能使用localhost或127.0.0.1，必须替换为你电脑的局域网IP地址（格式通常为192.168.x.x）：

• 查看局域网IP：
  • Windows：打开命令提示符，执行ipconfig找到对应网卡的IPv4地址
  • Mac/Linux：终端执行ifconfig或ip addr获取局域网IP
• 修改React项目中API请求的基础路径，比如把http://localhost:8000/api替换为http://192.168.x.x:8000/api

2. 配置Laravel跨域（CORS） #

手机端跨域请求后端会被浏览器拦截，需在Laravel中开启跨域支持：

• 安装跨域包：composer require fruitcake/laravel-cors
• 发布配置文件：php artisan vendor:publish --tag="cors"
• 编辑config/cors.php：
  • paths设置为['api/*', 'sanctum/csrf-cookie']（若使用Sanctum认证）
  • allowed_origins设为['*']（测试环境可用，生产环境需指定具体域名）
  • allowed_methods和allowed_headers均设为['*']
• 在app/Http/Kernel.php的middlewareGroups->api数组中，添加\Fruitcake\Cors\HandleCors::class

3. 处理CSRF令牌（针对Sanctum认证场景） #

如果用Laravel Sanctum做用户认证，需先获取CSRF令牌再发起请求：

• 在React的登录页面或入口文件中，先请求CSRF接口，再发送登录请求，示例代码（用axios）：

  axios.get('http://192.168.x.x:8000/sanctum/csrf-cookie', { withCredentials: true })
    .then(() => {
      axios.post('http://192.168.x.x:8000/api/login', { email, password }, { withCredentials: true })
    })
  

4. 确认网络连通性 #

• 手机和电脑必须连接同一WiFi局域网
• 在手机浏览器直接访问http://192.168.x.x:8000/api，验证是否能返回正常JSON响应；若无法访问，检查Laravel服务是否正常启动，或电脑防火墙是否拦截8000端口
• 同时验证React前端地址（如Vite默认的http://192.168.x.x:5173）在手机端能否正常加载静态页面

5. 排查Laravel路由与认证配置 #

• 确认API路由都定义在routes/api.php中，且带有api/前缀
• 若使用Passport或Sanctum，确保路由已正确挂载auth:sanctum或auth:api中间件
• 查看Laravel日志文件storage/logs/laravel.log，排查请求是否存在路由错误、认证失败等具体报错

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