Laravel App 中 Vite 编译资产的自定义 s3 基本 URL答案

【问题标题】：Custom s3 base URLs for Vite compiled asset in Laravel AppLaravel App 中 Vite 编译资产的自定义 s3 基本 URL
【发布时间】：2022-09-26 18:22:41
【问题描述】：

我正在使用Laravel 9 应用程序。 Laravel 最新版本已将 webpack 替换为 vite。我能够成功地将应用程序运行到我的本地环境中，但是在将已编译的资产部署到 AWS S3 时，我在浏览器控制台中遇到了 CORS 错误。

我在本地环境中运行后执行的步骤。

在我的.env 文件中添加了ASSET_URL=https://****.s3.ap-south-1.amazonaws.com

运行npm run build

运行aws s3 sync public/ s3://****/ --delete --exclude index.php --acl public-read

我可以看到我的.css 和其他文件已完美加载，但我仅在编译的js 文件中收到CORS 错误。

我还在我的s3 bucket 中添加了政策：

{
    \"Version\": \"2012-10-17\",
    \"Id\": \"Policy1617109982386\",
    \"Statement\": [
        {
            \"Sid\": \"Stmt1617109981105\",
            \"Effect\": \"Allow\",
            \"Principal\": \"*\",
            \"Action\": \"s3:GetObject\",
            \"Resource\": \"arn:aws:s3:::****/*\"
        }
    ]
}

但这对我没有帮助。

我的Vite 配置文件如下所示：

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,
                },
            },
        }),
    ],
});

我还尝试在 vite.config.js 文件中声明 cors：

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,
                },
            },
        }),
    ],
    server: {
        cors: true
    }
});

我找不到任何解决方案。帮帮我。

谢谢。

问题不在于获取脚本，而是“服务器”返回的标头不允许您的来源/方法等。引用“跨源资源共享标准通过添加新的 HTTP 标头来工作让服务器描述允许哪些来源从 Web 浏览器读取该信息。\" - 更多信息； developer.mozilla.org/en-US/docs/Web/HTTP/CORS

标签： laravel vue.js vite laravel-vite

【解决方案1】：

嘿，看看在 s3 存储桶中设置 CORS。

https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html

【讨论】：