Laravel 9中Vite编译JS资源部署至AWS S3遇CORS错误求助

核心问题 #

你遇到的CORS错误并非来自Vite配置或桶策略，而是S3存储桶未配置CORS规则——桶策略仅控制AWS资源的访问权限，而浏览器层面的跨域请求需要单独配置CORS规则。CSS文件正常是因为部分浏览器对静态资源的CORS校验更宽松，而JS模块的导入/动态加载会严格触发CORS校验。

解决方案步骤 #

1. 配置S3存储桶的CORS规则 #

登录AWS控制台，找到目标存储桶：

• 进入「权限」标签页
• 找到「跨域资源共享(CORS)」模块，点击「编辑」
• 添加以下规则（可根据需求限制来源域名）：

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET", "HEAD"],
        "AllowedOrigins": ["*"],
        "ExposeHeaders": []
    }
]

• 若需限制特定域名，将"*"替换为你的应用域名，例如["https://your-production-domain.com"]

2. 验证S3文件的ACL权限 #

执行同步命令后，确认JS文件在S3上的权限为public-read：

• 在S3控制台找到目标JS文件，查看「权限」中的「对象所有权」和「访问控制列表」，确保允许公共读取

3. 清理无效的Vite配置 #

你添加的server.cors: true仅作用于本地开发服务器，部署到生产环境后完全无效，可从vite.config.js中移除该配置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

4. 清除浏览器缓存 #

浏览器可能缓存了旧的CORS响应头，强制刷新页面（Ctrl+Shift+R或Cmd+Shift+R）后重新测试。

额外排查点 #

• 查看浏览器控制台的具体CORS错误信息，比如是否提示Access-Control-Allow-Origin缺失，或请求方法不被允许，可针对性调整CORS规则
• 确认ASSET_URL配置正确，同步S3时未遗漏JS文件

内容的提问来源于stack exchange，提问作者Nitish Kumar