如何解决这个cors问题laravel 11 reverb api在react js中使用

Question

WebSocket 连接已建立 messages-inbox:1 从源“http://localhost:3000”访问“http://localhost:8080/api/broadcasting/auth”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

cors.php<?php

返回[

/*
|--------------------------------------------------------------------------
| Cross-Origin Resource Sharing (CORS) Configuration
|--------------------------------------------------------------------------
|
| Here you may configure your settings for cross-origin resource sharing
| or "CORS". This determines what cross-origin operations may execute
| in web browsers. You are free to adjust these settings as needed.
|
| To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
*/

'paths' => ['api/*', 'sanctum/csrf-cookie', 'broadcasting/auth', 'api/broadcasting/auth'],

'allowed_methods' => ['*'],

'allowed_origins' => ['http://localhost:3000'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => false,

];

reverb.php<?php

返回[

/*
|--------------------------------------------------------------------------
| Default Reverb Server
|--------------------------------------------------------------------------
|
| This option controls the default server used by Reverb to handle
| incoming messages as well as broadcasting message to all your
| connected clients. At this time only "reverb" is supported.
|
*/

'default' => env('REVERB_SERVER', 'reverb'),

/*
|--------------------------------------------------------------------------
| Reverb Servers
|--------------------------------------------------------------------------
|
| Here you may define details for each of the supported Reverb servers.
| Each server has its own configuration options that are defined in
| the array below. You should ensure all the options are present.
|
*/

'servers' => [

    'reverb' => [
        'host' => env('REVERB_SERVER_HOST', '0.0.0.0'),
        'port' => env('REVERB_SERVER_PORT', 8080),
        'hostname' => env('REVERB_HOST'),
        'options' => [
            'tls' => [],
        ],
        'max_request_size' => env('REVERB_MAX_REQUEST_SIZE', 10_000),
        'scaling' => [
            'enabled' => env('REVERB_SCALING_ENABLED', false),
            'channel' => env('REVERB_SCALING_CHANNEL', 'reverb'),
            'server' => [
                'url' => env('REDIS_URL'),
                'host' => env('REDIS_HOST', '127.0.0.1'),
                'port' => env('REDIS_PORT', '6379'),
                'username' => env('REDIS_USERNAME'),
                'password' => env('REDIS_PASSWORD'),
                'database' => env('REDIS_DB', '0'),
            ],
        ],
        'pulse_ingest_interval' => env('REVERB_PULSE_INGEST_INTERVAL', 15),
        'telescope_ingest_interval' => env('REVERB_TELESCOPE_INGEST_INTERVAL', 15),
    ],

],

/*
|--------------------------------------------------------------------------
| Reverb Applications
|--------------------------------------------------------------------------
|
| Here you may define how Reverb applications are managed. If you choose
| to use the "config" provider, you may define an array of apps which
| your server will support, including their connection credentials.
|
*/

'apps' => [

    'provider' => 'config',

    'apps' => [
        [
            'key' => env('REVERB_APP_KEY'),
            'secret' => env('REVERB_APP_SECRET'),
            'app_id' => env('REVERB_APP_ID'),
            'options' => [
                'host' => env('REVERB_HOST'),
                'port' => env('REVERB_PORT', 443),
                'scheme' => env('REVERB_SCHEME', 'https'),
                'useTLS' => env('REVERB_SCHEME', 'https') === 'https',
                
            ],
            'allowed_origins' => ['*'],
            'ping_interval' => env('REVERB_APP_PING_INTERVAL', 60),
            'max_message_size' => env('REVERB_APP_MAX_MESSAGE_SIZE', 10_000),
        ],
    ],

],

];

Answer 1

您的问题中没有足够的信息来提供明确的答案。但是，您似乎在前端配置了不正确的端口。您正尝试在 Reverb 使用的同一端口 - 8080 上向 URL“/api/broadcasting/auth”发出身份验证请求。这不太正确。端口应为 8000 或 Laravel 后端应用程序使用的任何端口。因此，来自前端的请求应该类似于“http://localhost:8000/api/broadcasting/auth”。

这是初始化 Echo 实例的示例（在本例中，在 Vue 应用程序的可组合项中）：

import { ref } from 'vue'
import Echo from 'laravel-echo'
import axios from 'axios'

const axios = axios.create({
  baseURL: 'http://localhost:8000',
  withCredentials: true,
  withXSRFToken: true,
})

export default function useEcho() {
  const echoInstance = ref<Echo | null>(null)

  echoInstance.value = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    authorizer: (channel: { name: string }) => {
      return {
        authorize: (socketId: string, callback: (error: boolean, data: any) => void) => {
          axios.post('/api/broadcasting/auth', {
            socket_id: socketId,
            channel_name: channel.name
          })
            .then(response => {
              callback(false, response.data);
            })
            .catch(error => {
              callback(true, error);
            });
        }
      };
    },
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
  })

  return {
    echoInstance
  }
}

在组件中的使用

import useEcho from "@/composables/useEcho";
import {onMounted} from "vue";
import {useAuthStore} from "@/stores/authStore";

const authStore = useAuthStore()
const {echoInstance} = useEcho()

onMounted(() => {
  connectToChatChannel()
})

const connectToChatChannel = () => {
  if (echoInstance) {
    echoInstance?.value?.private(`chat.${authStore?.user?.id}`)
      .listen('MessageSent', (event: any) => {
        console.log('Event received: ', event)
    })
  }
}