本地正常但外接设备访问遇跨域请求阻塞（CORS问题）

核心问题定位 #

你怀疑的主机不一致是关键原因：外部设备访问时，前端资源请求的是localhost:5173，但外部设备无法解析这个地址（localhost仅指向设备自身），同时Vite开发服务器默认只绑定127.0.0.1，外部设备无法连接，进而触发CORS报错。

具体修复步骤 #

1. 配置Vite允许外部访问 #

修改vite.config.js，指定服务器host为0.0.0.0（允许所有IP访问），同时设置origin为你的电脑局域网IP（比如http://192.168.1.100:5173）：

export default defineConfig({
  server: {
    host: '0.0.0.0',
    origin: 'http://你的局域网IP:5173' // 替换成实际IP
  },
  // 其他原有配置...
})

2. 调整环境变量中的域名 #

更新.env文件，将前端资源地址从localhost替换为你的局域网IP：

APP_URL=http://你的局域网IP:8000
VITE_APP_URL=http://你的局域网IP:5173

3. 验证CORS中间件配置 #

自定义CORS中间件需确保允许外部设备的来源，开发环境可临时放宽限制（生产环境要指定具体域名）：

// 自定义CORS中间件示例
return $next($request)
    ->header('Access-Control-Allow-Origin', '*')
    ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
    ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

若之前修改过cors.php，可先重置为默认配置，再配合自定义中间件使用。

4. 重启相关服务 #

修改配置后，重启Vite开发服务器和Laravel服务，确保配置生效。

5. 外部设备访问方式 #

确保外部设备和你的电脑在同一局域网，访问时用你的电脑局域网IP代替localhost，比如访问http://192.168.1.100:8000（Laravel地址），此时前端资源会从对应IP的Vite服务器加载，不会触发跨域。

内容的提问来源于stack exchange，提问作者B.Simsek