带推进器和Vue的Laravel回声

我使用Laravel作为服务器部件，使用Vue Cli作为客户端。 我也用 但当我尝试将vue客户端连接到laravel websockets时，控制台日志中出现错误

WebSocket connection to 'ws://http//websockets.test:6001/app/myKey?protocol=7&client=js&version=5.1.1&flash=false' failed: Connection closed before receiving a handshake response

WebSocket connection to 'wss://http//websockets.test:443/app/myKey?protocol=7&client=js&version=5.1.1&flash=false' failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED

Access to XMLHttpRequest at 'http://sockjs-mt1.pusher.com/pusher/app/myKey/659/6nenb2dd/xhr_streaming?protocol=7&client=js&version=5.1.1&t=1583092642805&n=1' from origin 'http://app.vuesocks.test:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

以下是我在Vue Cli index.js Echo选项中的代码

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: 'myKey',
  cluster: 'mt1',
  authEndpoint: 'http://websockets.test/broadcasting/auth',
  wsHost: 'http://websockets.test',
  wsPort: 6001,
  disableStats: true,
  auth: {
    headers: {
      Authorization: 'Bearer myToken...',
    },
  },
});

BroadcastServiceProvider.php

Broadcast::routes(['middleware' => 'auth:api']);

channel.php

Broadcast::channel('chat', function () {
    return 'Hello!';
});

---

如果删除

wsHost

和

wsPort

，则不会出现错误，但不会发生任何事情，服务器没有响应。

这可能已经得到解决，但对于仍然无法让前端侦听事件的人来说，对我有效的方法是将pusher js恢复到5.1.1版，在repo上找到了这个问题的答案：

我也遇到了同样的问题（Laravel和Vuejs），它在localhost中工作，但当我托管到vps CORS时，控制台中会显示问题。 我将pushers js版本从6.0.0改为5.1.1，这对我很有用。

您是否正在运行php artisan websockets:serve？在大多数情况下，在收到响应之前关闭连接就是由于此原因。