Laravel Websockets 连接错误 WebSocket 握手期间出错：意外响应代码：404

问题描述

我正在尝试使用 this library

在本地主机上设置 Laravel websockets

我收到此错误

我已经安装了软件包并在运行 PHP artisan websockets:serve 的本地主机上启动了服务

我的 Bootstrap.js 是：

import Echo from "laravel-echo"

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',key: process.env.MIX_PUSHER_APP_KEY,wsHost: window.location.hostname,wsPort: 6001,disableStats: true,});
window.Echo.channel('DemoChannel').listen('WebsocketDemoEvent',(e) => function() {
    console.log(e);
});

解决方法

创建一个新的中间件：app/Http/Middleware/cors.php

将 cors 中间件添加到 app/Http/Kernel.php

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle(Request $request,Closure $next)
    {
        return $next($request)
        ->header('Access-Control-Allow-Origin','*')
        ->header('Access-Control-Allow-Methods','GET,POST,PUT,DELETE,OPTIONS');
    }
}

将新的 cors 中间件添加到您的路由中

protected $routeMiddleware = [
    //default laravel middleware
    'cors' => \App\Http\Middleware\Cors::class,];

---注意--- 这现在将接受来自任何地方的请求。

这在本地主机上没问题，但是当您移动到实时服务器时，您需要更改：

Route::get('/broadcast',function () {
    broadcast(new hello());
});
})-> middleware('cors');

到

->header('Access-Control-Allow-Origin','*')

或者您需要创建一个 api 密钥来与每个请求一起传递，以便您可以拥有公共 api（不推荐，但这是一个可行的解决方法）

laravel laravel laravel-websockets