Laravel 10+XAMPP环境下WebSocket连接失败及asset()图片加载异常求助

一、WebSocket连接错误（ws://127.0.0.1:5500//ws failed） #

原因 #

你当前用VS Code Live Server（默认端口5500）启动项目，但Live Server不支持Laravel的WebSocket服务，导致连接失败。

解决步骤 #

1. 关闭VS Code的Live Server插件（如果正在运行）
2. 选择以下任一方式启动项目：
   • 方式1：Laravel内置开发服务器
     在项目根目录打开终端，执行命令：

     php artisan serve
     

     启动后访问 http://127.0.0.1:8000
   • 方式2：XAMPP Apache配置
     将Laravel项目文件夹放到XAMPP的htdocs目录下（比如命名为laravel-app），然后访问：
     http://localhost/laravel-app/public
3. 配置WebSocket服务（如果用Laravel Echo/laravel-websockets）
   • 打开项目根目录的.env文件，设置APP_URL为你实际访问的地址，比如：

     APP_URL=http://127.0.0.1:8000
     

   • 启动WebSocket服务：

     php artisan websockets:serve
     

   • 前端连接地址要对应服务端口（默认6001），比如：ws://127.0.0.1:6001/app/{your-pusher-key}

二、asset()方法图片加载错误（net::ERR_INVALID_HTTP_RESPONSE） #

原因 #

asset()生成的URL依赖APP_URL配置，若配置错误或Apache重写模块未启用，会导致图片无法加载。

解决步骤 #

1. 修正.env配置
   • 打开.env文件，设置APP_URL为实际访问地址：
     • 内置服务器：APP_URL=http://127.0.0.1:8000
     • XAMPP Apache：APP_URL=http://localhost/laravel-app/public
   • 执行命令清除配置缓存：

     php artisan config:cache
     

2. 启用Apache重写模块
   • 打开XAMPP控制面板，点击Apache的「Config」→ 选择「httpd.conf」
   • 找到行#LoadModule rewrite_module modules/mod_rewrite.so，删除前面的#
   • 保存文件后重启Apache
3. 确认图片路径与权限
   • 将图片放到项目的public/images目录下（例：public/images/logo.png）
   • 视图中调用asset('images/logo.png')，确认生成的URL正确（如http://127.0.0.1:8000/images/logo.png）
   • Linux/Mac环境可执行命令确保目录权限：

     chmod -R 755 public
     

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