Laravel-Vite开发环境Web Worker跨源问题及解决方案咨询

方案一：配置Vite代理（推荐） #

该方案保留HMR与TypeScript支持，彻底解决跨域问题，步骤如下：

1. 修改Vite配置文件（vite.config.ts/vite.config.js），添加代理规则，将前端Worker请求转发至Vite开发服务器：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        proxy: {
            // 匹配/worker-proxy开头的请求，转发到Vite服务器
            '/worker-proxy': {
                target: 'http://localhost:5173',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/worker-proxy/, ''),
            },
        },
    },
});

2. 调整Worker创建逻辑，根据环境切换请求路径，确保开发环境走同源代理：

// Vue组件或JS/TS文件中
const isDev = import.meta.env.DEV;
let workerUrl: string | URL;

if (isDev) {
    // 开发环境：通过同源代理路径转发请求
    const workerPath = import.meta.url.split('@fs/')[1].replace('?import', '');
    workerUrl = new URL(`/worker-proxy/@fs/${workerPath}`, window.location.origin);
} else {
    // 生产环境：使用原生路径
    workerUrl = new URL('./worker.ts', import.meta.url);
}

const worker = new Worker(workerUrl, { type: 'module' });

3. 配置TypeScript支持，在tsconfig.json中添加Worker类型：

{
    "compilerOptions": {
        // 其他配置...
        "lib": ["ESNext", "WebWorker"]
    }
}

方案二：使用Vite原生Worker导入语法 #

Vite原生支持Worker导入，自动处理路径与跨域问题，代码更简洁：

// 直接导入Worker，Vite自动处理打包与开发环境路径
import MyWorker from './worker.ts?worker';

const worker = new MyWorker();

该方式自动适配开发环境的同源要求，同时支持TypeScript和HMR，是最省心的方案。

方案三：禁用HMR，改为全量编译（不推荐） #

若上述方案不适用，可将Vite改为类似Webpack的模式，每次变更后编译文件：

1. 修改package.json脚本，添加无HMR的开发命令：

{
    "scripts": {
        "dev": "vite build --watch",
        "build": "vite build"
    }
}

2. 运行npm run dev，Vite会监听文件变更，每次修改后自动编译到public/build目录，浏览器直接请求编译后的Worker文件，避免跨域。

内容的提问来源于stack exchange，提问作者ayb jax