Vite >6.0.9 has CORS issue with laravel-vite
Problem
Describe the bug After updating VITE to version 6.0.9 I get the following error when vite build FULL ERROR: [code block] Reproduction https://o.kg Steps to reproduce set 6.0.9 vite version npm install npm run build System Info [code block] Used Package Manager npm Logs _No response_ Validations - [ ] Follow our Code of Conduct - [ ] Read the Contributing Guidelines. - [ ] Read the docs. - [ ] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate. - [ ] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead. - [ ] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server. - [ ] The provided reproduction is a minimal reproducible example of the bug.
Error Output
error when vite build
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix CORS Issue in Vite 6.0.9 with Laravel
The CORS issue arises due to changes in how Vite handles cross-origin requests in version 6.0.9. This can lead to build failures when assets are served from different origins without proper CORS headers, particularly in a Laravel environment where the backend may not be configured to allow these requests.
Awaiting Verification
Be the first to verify this fix
- 1
Update CORS Configuration in Laravel
Ensure that your Laravel application is configured to allow CORS requests from the origin where Vite is serving the assets. You can do this by modifying the CORS settings in the `config/cors.php` file.
php<?php return [ 'paths' => ['api/*', 'sanctum/csrf-cookie'], 'allowed_methods' => ['*'], 'allowed_origins' => ['*'], // Replace '*' with your Vite server URL for production 'allowed_origins_patterns' => [], 'allowed_headers' => ['*'], 'exposed_headers' => [], 'max_age' => 0, 'supports_credentials' => true, ]; - 2
Install CORS Middleware
If not already installed, add the Laravel CORS package to your project. This can help manage CORS headers more effectively.
bashcomposer require fruitcake/laravel-cors - 3
Clear Configuration Cache
After making changes to the CORS configuration, clear the configuration cache to ensure the new settings take effect.
bashphp artisan config:cache - 4
Test the Build Process
Run the Vite build command again to see if the CORS issue has been resolved. Ensure that you are accessing the application from the correct origin.
bashnpm run build
Validation
Confirm that the build process completes without errors and that the application correctly serves assets without CORS issues. You can check the network tab in your browser's developer tools for any CORS-related errors.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep