Laravel+Vite+HMR环境下Web Worker跨域访问失败求助

在Vite+热模块替换（HMR）环境中使用Web Worker时，出现源无法访问Vite HMR服务器JS文件的错误，尽管所有访问配置看似正确。

错误信息 #

main.ts:25 Uncaught (in promise) DOMException: Failed to construct 'Worker': Script at 'http://localhost:5173/resources/js/core/engine/WorkerPoolWorker.js?type=module&worker_file' cannot be accessed from origin 'http://docker.magni-games.com'.

相关代码片段 #

main.ts #

const worker = new Worker(new URL("./core/engine/WorkerPoolWorker.js", import.meta.url), { type: 'module' }),

vite.config.ts #

import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"

export default defineConfig({
    server: {
        host: "0.0.0.0",
        hmr: {
            host: "localhost",
        },
    },
    plugins: [
        laravel({
            input: [
                // "resources/sass/app.scss",
                "resources/js/main.ts",
            ],
            refresh: ["lang/**", "routes/**", "resources/views/layouts/app.blade.php"],
        }),
    ],
})

config/cors.php #

<?php

return [
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

解决思路 #

• 统一HMR与应用域名
  错误核心是HMR配置的host为localhost，但应用运行在docker.magni-games.com，导致Worker请求的脚本域名与当前页面域名跨域。修改vite.config.ts的HMR配置：

  server: {
      host: "0.0.0.0",
      hmr: {
          host: "docker.magni-games.com", // 替换为你的应用域名
          protocol: 'ws', // 若使用HTTPS则改为wss
      },
  },
  

• 添加Vite服务器跨域头
  Laravel的CORS配置仅控制后端接口，Vite开发服务器的请求需单独配置跨域头，在vite.config.ts的server中添加：

  server: {
      // ...原配置
      headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': '*',
          'Access-Control-Allow-Headers': '*',
      },
  },
  

• 配置Worker专属跨域规则
  针对Web Worker的加载，在vite.config.ts中添加Worker配置：

  export default defineConfig({
      // ...原配置
      worker: {
          format: 'es',
          devServer: {
              headers: {
                  'Access-Control-Allow-Origin': '*',
              },
          },
      },
  })
  

• 确认本地域名解析
  确保本地能将docker.magni-games.com解析到Vite服务器的IP，可修改本地hosts文件添加：

  127.0.0.1 docker.magni-games.com
  

内容的提问来源于stack exchange，提问作者Steffen Ahlers