Question

我想使用pusher进行实时聊天，并且可以在公共频道上正常使用，但是当我使用私人频道时，出现此错误：

pusher.js:1333 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://20.30.0.236:8000/login with MIME type text/html

这是laravel代码：

事件：

use Dispatchable, InteractsWithSockets, SerializesModels;

/**
 * Create a new event instance.
 *
 * @return void
 */
public $user;
public $message;

public function __construct(User $user, Message $message)
{
    $this->user = $user;
    $this->message = $message;
}

/**
 * Get the channels the event should broadcast on.
 *
 * @return \Illuminate\Broadcasting\Channel|array
 */
public function broadcastOn()
{
    return new PrivateChannel('chat');
}

channels.php：

    Broadcast::channel('private-chat', function ($user) {
    return true;
});

BroadcastServiceProvider：

  class BroadcastServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Broadcast::routes(['middleware' => ['auth:api']]);

        require base_path('routes/channels.php');
    }
}

这是React js代码：

  export const onChatRcv = () => {
    try {
        Pusher.logToConsole = true;

        var pusher = new Pusher('83*********63c912f5', {
            cluster: 'ap2',
            forceTLS: true,
            authTransport: 'jsonp',
            authEndpoint: `${baseUrl}broadcasting/auth`,
            headers: {
                'Authorization' : `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjRhZTA1YjM2ZGNhN2I5NWI4NTJiZjFhOWRiZTQ5ZWE1NzFmNTNkMTE4NWQyOWU0Mjk0ZDI5NmJmZThhZTE0OGQzNzcwODM1MjEzYTg2NzA1In0.eyJhdWQiOiIxIiwianRpIjoiNGFlMDViMzZkY2E3Yjk1Yjg1MmJmMWE5ZGJlNDllYTU3MWY1M2QxMTg1ZDI5ZTQyOTRkMjk2YmZlOGFlMTQ4ZDM3NzA4MzUyMTNhODY3MDUiLCJpYXQiOjE1NTExMDQ3NTYsIm5iZiI6MTU1MTEwNDc1NiwiZXhwIjoxNTgyNjQwNzU2LCJzdWIiOiI1Iiwic2NvcGVzIjpbXX0.HOnNyhQQ48Hj4AZdP5vS5Zd5AfUr5XNP4zgrgR_f2-aAgFw4eWrNeHQSfdJt071_ChRINmv5W7O1LExxGIvCoSjiYFYPmw_8WjdFI_81WHoqM69ve-bgriK6eO1Yf0N3v3fc1DvPk2ZFYXXDmQbMLLXUyUqfjoYGty8AMgxCDulZ1tRMZ2rOVQZJ0ePbTw1eHQdMzBWG36fXWEbczLR99-_Dn8ta8P6iq0XWDr0cimlFzdHsG66iMeI0xWCJ1DRbxzr2LuX0j5zKe0j0_WNZJNbAFfeY87m7FDHjbHTNB1IB9Meh8kITV1mPQLc2n812j2QgW19KKWgpgZcy4tlfIBfT0x-aQAMkIUtmcHW0aEJ8RkHWKZYhyQ8yV61RIL3IxLpepHUVds8CZnxDGQ2NQ4bmb8UE7xQkV-KpmF5fZ0NCCxMuMpYdVkd0t9gc_Jra07_Sq7HbEJHEZbPCfhbDscAZQr2U9ddVaKwiGuFjSGXvOKS_lUAB91lBWada3k15FG2XoBfAv94mai2aWo41sep0nmlBKXPCVbWiczbeNL6ZXm_aE-tkLNS-Pc0veXogxZIaKVhFnRsW5qHTXI8v6sU6Nd9pzrIe173FqXQtzpA_tqrmdWU-lU-u484hWkPn2OcQcSckANpx-7_EVhrAPSfV7-WWamMRp2EC-3uFpmQ`,
            },
        });

        var privateChannel = pusher.subscribe('private-chat' );
        privateChannel.bind('App\\Events\\MessageSent', function(data) {
            console.log(data);
        });

    } catch (error) {
        console.error(error);
    }
}

出什么问题了？在使用公共频道时有效，但在私人频道中，我们收到此警告

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://20.30.0.236:8000/login with MIME type text/html

Answer 1

默认路由broadcasting/auth无法检索到合适的响应，因此我添加了自定义authEndPoint。

web.php：

Route::get('pusher/auth', 'PusherController@pusherAuth');

并添加了PusherController：

class PusherController extends Controller
{
    /**
     * Authenticates logged-in user in the Pusher JS app
     * For presence channels
     */
    public function pusherAuth()
    {

        $user = auth()->user();

        if ($user) {
            $pusher = new Pusher('auth-key', 'secret', 'app_id');
            $auth= $pusher->socket_auth(Input::get('channel_name'), Input::get('socket_id'));
            $callback = str_replace('\\', '', $_GET['callback']);
            header('Content-Type: application/javascript');
            echo($callback . '(' . $auth . ');');
            return;
        }else {
            header('', true, 403);
            echo "Forbidden";
            return;
        }
    }
}

这有效并订阅了频道。

Answer 2

您可以考虑访问私有通道，就像向服务器发出私有身份验证请求一样。由于安全原因，您不能直接访问私人频道。如CodeAcademy ....

所述

服务器用于托管网页，应用程序，图像，字体等。当您使用网络浏览器时，您可能会尝试访问不同的网站（托管在服务器上）。网站通常会从Internet上的不同位置（服务器）请求这些托管资源。服务器上的安全策略可减轻与请求托管在不同服务器上的资产相关的风险

您需要在laravel应用中添加一个策略来添加CORS（跨源请求共享）最初有点复杂，但是您可以使用此library。

现在，您可以向laravel应用发出任何形式的私人请求。

PS

不要忘了在channels.php的广播路由中添加检查，因为您只是返回true而没有任何检查。

使用pusher和laravel实时响应Web应用

2 个答案: