使用Pusher和Laravel构建实时React Web应用程序

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 代码：

事件（Event）：

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

- Bakhtiar

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;
        }
    }
}

这个操作有效并且订阅了该频道。

- Bakhtiar

Answer 2

访问私有频道就像向服务器发送私有认证请求一样。出于安全原因，您不能直接从React访问私有频道。正如CodeAcademy所提到的那样，服务器用于托管网页、应用程序、图像、字体等等。当您使用网络浏览器时，您可能正在尝试访问不同的网站（托管在服务器上）。网站通常会从互联网上的不同位置（服务器）请求这些托管资源。服务器上的安全策略可以减轻请求存储在不同服务器上的资产所带来的风险。

您需要在Laravel应用程序中添加CORS（跨域请求共享）策略。最初可能有点复杂，但是您可以使用这个库。现在，您可以对您的Laravel应用程序进行任何类型的私有请求。

注意，在channels.php的广播路由中添加检查，因为您只是简单地返回true，没有任何检查。

- Saket Aryan