CORS Policy Error in differnt browsers and different environments-CodePudding

I have some Issues in the CORS Policy with my app. Im using the s3 services from amazon to play some audio datas, they are stored there, also i wrote and visualizer with createMediaElement function. I already turned my Policys in my Bucket that anything should work like this...


[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

In my local environment it works fine at least with MF-Browser, in GC there are issues like ...

Access to audio at 'https://podcast-oemus.s3.eu-central-1.amazonaws.com/development/tracks/audio/6267abd0114d375c8f878b904e.mp3' from origin 'http://podcast-oemus-com.test' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

And in my live environment it does not work either it just loads one particular data and then stopped working for anything else, in all browsers.

So im also using Laravel 8 and Vue 3 with Inertia. Ive getting only these errors for the audio stuff anything else works properly. Do i have to turn something? Change something i dont know in Laravel, if somebody has an answer i would appreciate!

Thanks!

CodePudding user response：

Well i guess i already found the Problem was just a simple syntax mistake. in the second object "AllowedHeaders": []," is missing the the headers which are allwoed so for me i just put "*" and it worked

CodePudding user response：

It doesn't matter which version of Laravel are you using. you just need to allow CORS for all your routes, add the HandleCors middleware in the

$middleware property of app/Http/Kernel.php class:
protected $middleware = [
    \App\Http\Middleware\Cors::class,
] 
protected $routeMiddleware = [
    'cors' => \App\Http\Middleware\Cors::class,
];

Once you have this process completed the clear the cache

php artisan cache:clear
php artisan config:cache

The last and important point is whenever you hit any request to another server through API, end of the function there must be a return so that the function gets to know that it has to return some data in the response. I hope this solution will work.