CarbonNanotubes's avatar

CORS issue with Laravel Octane, Vite & Docker

From a brand new project I am trying to setup the basic vite development workflow. I have configure laravel to use octane (FrankenPHP) for the app server, I installed breeze using the Vue + Inertia config and the Dark mode and Inertia SSR options. When loading the root page I get CORS errors.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5173/@vite/client. (Reason: CORS request did not succeed). Status code: (null). Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5173/resources/js/Pages/app.vue. (Reason: CORS request did not succeed). Status code: (null). Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5173/resources/js/app.js. (Reason: CORS request did not succeed). Status code: (null).

Here is my docker-compose.yml file

Here is my frankenphp container dockerfile

FROM dunglas/frankenphp:alpine

RUN install-php-extensions \
    pcntl ldap sqlsrv pdo_sqlsrv

COPY ./src /app

WORKDIR /app

ENTRYPOINT ["php", "artisan", "octane:frankenphp"]

Here is my vite.config.js file

Here is my cors.php file

<?php

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'], // Add any other paths you need
    'allowed_methods' => ['*'], // Allow all HTTP methods
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'], // Allow all headers
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];
0 likes
3 replies
LaryAI's avatar
Level 58

To resolve the CORS issue you're experiencing with Laravel Octane, Vite, and Docker, you need to ensure that your Vite development server is properly configured to allow requests from your Laravel application. Here are some steps and adjustments you can make:

  1. Vite Configuration: Your vite.config.js file seems mostly correct, but ensure that the origin in the cors configuration matches the URL where your Laravel app is running. If your Laravel app is running on http://localhost:8900, update the origin accordingly.

    server: {
        host: '0.0.0.0',
        port: 5173,
        strictPort: true,
        cors: {
            origin: 'http://localhost:8900', // Update this to match your Laravel app's URL
            credentials: true,
        },
        hmr: {
            host: 'localhost',
        },
    },
    
  2. Docker Networking: Ensure that both your Laravel app and Vite server are on the same Docker network. Your docker-compose.yml file already specifies a network (rpi-manager), so both services should be able to communicate.

  3. CORS Configuration in Laravel: Your cors.php configuration allows all origins, which should generally work. However, for security reasons, you might want to specify the exact origin:

    'allowed_origins' => ['http://localhost:5173'],
    
  4. Check Network Accessibility: Ensure that your Docker containers can communicate with each other. You can test this by entering the shell of one container and trying to ping the other service.

  5. Browser Cache: Sometimes, CORS issues can be cached by the browser. Clear your browser cache or try accessing your application in an incognito window.

  6. Firewall/Proxy Settings: Ensure that there are no firewall or proxy settings blocking the requests between your Docker containers.

  7. Check for Errors in Console: Look for any additional error messages in the browser console or network tab that might provide more context.

By following these steps, you should be able to resolve the CORS issues between your Laravel application and Vite development server running in Docker. If the problem persists, double-check the URLs and ports to ensure they match exactly between your configurations.

CarbonNanotubes's avatar

Lary's answer did not fix the issue. I am still getting the same errors

CarbonNanotubes's avatar
CarbonNanotubes
OP
Best Answer
Level 19

forgot about this thread.

I started by ensuring that I could just open the app.js file in the browser through vite. Once that was confirmed working I was able to find out that the host: property in my vite.config.js file needed to not be 0.0.0.0 but localhost

Please or to participate in this conversation.