Vite is suddenly not working due to CORS error? 🧐 (DDEV)

If you work with a tool like DDEV and recently updated Vite, you will encounter the following error:

Access to script at 'https://my-project.ddev.site:5173/@vite/client' from origin 'https://my-project.ddev.site' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is because a security issue was reported to Vite: Any websites were able to send any requests to the development server and read the response

The issue was fixed in minor versions of Vite >=6.0.9, >=5.4.12 and >=4.5.6.

In a nutshell: The issue was that attackers could send you a link to a malicious website and steal your JS source code by fetching it from your local Vite and submit it to their servers.

Previous to the updated versions of Vite, server.cors was set to true by default. That meant allowing all request origins to retrieve JS scripts or CSS from the Vite dev server (via header Access-Control-Allow-Origin: *).

In the new versions of Vite, the default value of server.cors is now an object with a regular expression (regex) for origin:

{ origin: /^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/ }

The new default regex ONLY allows requests from localhost, 127.0.0.1 and ::1.

But when we're working with DDEV, the requests to the Vite dev server will be made from origins like https://my-project.ddev.site. And this won't be allowed anymore by the new default setting. 🙅

Set it securely for DDEV

Fortunately, fixing this is easy. In order to use a secure config for DDEV, use the following value for server.cors.origin in vite.config.js:

import { defineConfig } from "vite"

export default defineConfig({
  // Your settings
  // ...

  // Adjust Vites dev server to work with DDEV
  // https://vitejs.dev/config/server-options.html
  server: {
    // Respond to all network requests
    host: "0.0.0.0",
    port: 5173,
    strictPort: true,
    // Defines the origin of the generated asset URLs during development, this must be set to the
    // Vite dev server URL and selected port. In general, `process.env.DDEV_PRIMARY_URL` will give
    // us the primary URL of the DDEV project, e.g. "https://test-vite.ddev.site". But since DDEV
    // can be configured to use another port (via `router_https_port`), the output can also be
    // "https://test-vite.ddev.site:1234". Therefore we need to strip a port number like ":1234"
    // before adding Vites port to achieve the desired output of "https://test-vite.ddev.site:5173".
    origin: `${process.env.DDEV_PRIMARY_URL.replace(/:\d+$/, "")}:5173`,

    // 👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇
    // Configure CORS securely for the Vite dev server to allow requests from *.ddev.site domains,
    // supports additional hostnames (via regex). If you use another `project_tld`, adjust this.
    cors: {
      origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.ddev\.site)(?::\d+)?$/,
    },
  },
})

This regex allows requests from your local sites running on *.ddev.site domains.

(It also supports projects running on a custom router_https_port such as https://my-project.ddev.site:1234 via (?::\d+)).

See Working with Vite in DDEV - ddev.com for all details and further information. If you have questions, have a chat at DDEV Discord. Have fun with DDEV!

Please note that this shouldn't be confused with server.origin which needs to point to the Vite dev server URL (like https://my-project.ddev.site:5173).

Other tools (Laravel Valet, Laravel Herd, etc.)

For other local web dev tools, you can use a regex like that:

export default defineConfig({
  // ...
  server:
  // ...
    cors: {
         origin: /https?://([A-Za-z0-9-.]+)?(localhost|\.test)(?::\d+)?$/
      },

If you use another domain ending (TLD) than .test, adjust this to include your local domain of choice.

Disclaimer: Not tested these settings myself.

Security note ⚠️

There is also advice in the web that setting cors: true will fix the error. Please be aware that this will open up the attack surface again and it totally defeats the purpose of the whole security fix. As stated in Vites official docs:

WARNING
We recommend setting a specific value rather than true to avoid exposing the source code to untrusted origins.

(https://vite.dev/config/server-options#server-cors)

PHP frameworks and CMSes

I'll give some brief information here for some CMSes and frameworks, for the full list please check Working with Vite in DDEV - ddev.com. Please beware - this list here might be outdated soon.

Craft CMS

The docs for DDEV usage of craft-vite have already been updated to get it working again.

PRs for updating craft-vite:

• #92
• #99

Laravel Vite plugin

Laravel maintains a laravel-vite-plugin (NodeJS), it was updated to integrate the changes made in the Vite update:

• https://github.com/laravel/vite-plugin/releases/tag/v1.2.0

(See this commit for more information).

TYPO3

The vite-plugin-typo3 made a hotfix, open issue: #16

Related links:

• Official DDEV guide: Working with Vite in DDEV - ddev.com
• Vite Security advisory
• PR for ddev.com article update
• PRs for updating craft-vite: #92, #99
• DDEV Vite Simple DEMO
• Show security warning for server.cors = true #19345
• typo3-vite-plugin: #16
• laravel-vite-plugin Update

Acknowledgements

Thanks to Andrew Welch for providing the first regexes, Stanislav Zhuk for collaborating on the ddev.com PR, ViteJS core maintainer sapphi-red for improving the ddev.com PR and Simon Praetorius for sending me infos about how Laravel solved it. 🤝