Custom s3 base URLs for Vite compiled asset in Laravel App

Question

I'm using Laravel 9 application. Laravel latest version has replaced webpack to vite. I was able to successfully run the app into my local environment but, while deploying the compiled assets to the AWS S3 I'm getting CORS error in the browser console.

Steps I did after running in local environment.

added ASSET_URL=https://****.s3.ap-south-1.amazonaws.com in my .env file

run npm run build

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

I can see that my .css and other files are loaded perfectly, but I'm getting CORS error only in the compiled js file.

I also added policy in my s3 bucket:

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

But this isn't helping me out.

My Vite config file looks like:

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

I also tried declaring cors in vite.config.js file:

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

I'm unable to find any solution. Help me out.

Thanks.

Answer 1

Hey Have a look at setting CORS in the s3 bucket.

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