Merge branch 'main' into main

Author: patak-dev

docs/config/index.md

@@ -22,6 +22,10 @@ You can also explicitly specify a config file to use with the `--config` CLI opt
 vite --config my-config.js
 ```
 
+::: tip BUNDLING THE CONFIG
+By default, Vite uses `esbuild` to bundle the config into a temporary file. This can cause issues when importing TypeScript files in a monorepo. If you encounter any issues with this approach, you can specify `--configLoader=runner` to use the module runner instead - it will not create a temporary config and will transform any files on the fly. Note that module runner doesn't support CJS in config files, but external CJS packages should work as usual.
+:::
+
 ## Config Intellisense
 
 Since Vite ships with TypeScript typings, you can leverage your IDE's intellisense with jsdoc type hints:

docs/config/preview-options.md

@@ -19,6 +19,15 @@ See [`server.host`](./server-options#server-host) for more details.
 
 :::
 
+## preview.allowedHosts
+
+- **Type:** `string | true`
+- **Default:** [`server.allowedHosts`](./server-options#server-allowedhosts)
+
+The hostnames that Vite is allowed to respond to.
+
+See [`server.allowedHosts`](./server-options#server-allowedhosts) for more details.
+
 ## preview.port
 
 - **Type:** `number`
@@ -78,7 +87,9 @@ Uses [`http-proxy`](https://github.com/http-party/node-http-proxy). Full options
 - **Type:** `boolean | CorsOptions`
 - **Default:** [`server.cors`](./server-options#server-cors)
 
-Configure CORS for the preview server. This is enabled by default and allows any origin. Pass an [options object](https://github.com/expressjs/cors#configuration-options) to fine tune the behavior or `false` to disable.
+Configure CORS for the preview server.
+
+See [`server.cors`](./server-options#server-cors) for more details.
 
 ## preview.headers
 

docs/config/server-options.md

@@ -42,6 +42,20 @@ See [the WSL document](https://learn.microsoft.com/en-us/windows/wsl/networking#
 
 :::
 
+## server.allowedHosts
+
+- **Type:** `string[] | true`
+- **Default:** `[]`
+
+The hostnames that Vite is allowed to respond to.
+`localhost` and domains under `.localhost` and all IP addresses are allowed by default.
+When using HTTPS, this check is skipped.
+
+If a string starts with `.`, it will allow that hostname without the `.` and all subdomains under the hostname. For example, `.example.com` will allow `example.com`, `foo.example.com`, and `foo.bar.example.com`.
+
+If set to `true`, the server is allowed to respond to requests for any hosts.
+This is not recommended as it will be vulnerable to DNS rebinding attacks.
+
 ## server.port
 
 - **Type:** `number`
@@ -147,8 +161,15 @@ export default defineConfig({
 ## server.cors
 
 - **Type:** `boolean | CorsOptions`
+- **Default:** `{ origin: /^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/ }` (allows localhost, `127.0.0.1` and `::1`)
 
-Configure CORS for the dev server. This is enabled by default and allows any origin. Pass an [options object](https://github.com/expressjs/cors#configuration-options) to fine tune the behavior or `false` to disable.
+Configure CORS for the dev server. Pass an [options object](https://github.com/expressjs/cors#configuration-options) to fine tune the behavior or `true` to allow any origin.
+
+:::warning
+
+We recommend setting a specific value rather than `true` to avoid exposing the source code to untrusted origins.
+
+:::
 
 ## server.headers
 

docs/guide/api-environment-frameworks.md

@@ -46,8 +46,13 @@ The `runner` is evaluated eagerly when it's accessed for the first time. Beware
 Given a Vite server configured in middleware mode as described by the [SSR setup guide](/guide/ssr#setting-up-the-dev-server), let's implement the SSR middleware using the environment API. Error handling is omitted.
 
 ```js
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { createServer } from 'vite'
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
 const server = await createServer({
   server: { middlewareMode: true },
   appType: 'custom',

docs/guide/backend-integration.md

@@ -12,6 +12,12 @@ If you need a custom integration, you can follow the steps in this guide to conf
    import { defineConfig } from 'vite'
    // ---cut---
    export default defineConfig({
+     server: {
+       cors: {
+         // the origin you will be accessing via browser
+         origin: 'http://my-backend.example.com',
+       },
+     },
      build: {
        // generate .vite/manifest.json in outDir
        manifest: true,

docs/guide/build.md

@@ -4,14 +4,19 @@ When it is time to deploy your app for production, simply run the `vite build` c
 
 ## Browser Compatibility
 
-The production bundle assumes support for modern JavaScript. By default, Vite targets browsers which support the [native ES Modules](https://caniuse.com/es6-module), [native ESM dynamic import](https://caniuse.com/es6-module-dynamic-import), and [`import.meta`](https://caniuse.com/mdn-javascript_operators_import_meta):
+By default, the production bundle assumes support for modern JavaScript, including [native ES Modules](https://caniuse.com/es6-module), [native ESM dynamic import](https://caniuse.com/es6-module-dynamic-import), and [`import.meta`](https://caniuse.com/mdn-javascript_operators_import_meta). The default browser support range is:
 
 - Chrome >=87
 - Firefox >=78
 - Safari >=14
 - Edge >=88
 
-You can specify custom targets via the [`build.target` config option](/config/build-options.md#build-target), where the lowest target is `es2015`.
+You can specify custom targets via the [`build.target` config option](/config/build-options.md#build-target), where the lowest target is `es2015`. If a lower target is set, Vite will still require these minimum browser support ranges as it relies on [native ESM dynamic import](https://caniuse.com/es6-module-dynamic-import) and [`import.meta`](https://caniuse.com/mdn-javascript_operators_import_meta):
+
+- Chrome >=64
+- Firefox >=67
+- Safari >=11.1
+- Edge >=79
 
 Note that by default, Vite only handles syntax transforms and **does not cover polyfills**. You can check out https://cdnjs.cloudflare.com/polyfill/ which automatically generates polyfill bundles based on the user's browser UserAgent string.
 
@@ -106,9 +111,12 @@ During dev, simply navigate or link to `/nested/` - it works as expected, just l
 During build, all you need to do is to specify multiple `.html` files as entry points:
 
 ```js twoslash [vite.config.js]
-import { resolve } from 'path'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vite'
 
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
 export default defineConfig({
   build: {
     rollupOptions: {
@@ -134,9 +142,12 @@ When it is time to bundle your library for distribution, use the [`build.lib` co
 ::: code-group
 
 ```js twoslash [vite.config.js (single entry)]
-import { resolve } from 'path'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vite'
 
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
 export default defineConfig({
   build: {
     lib: {
@@ -162,9 +173,12 @@ export default defineConfig({
 ```
 
 ```js twoslash [vite.config.js (multiple entries)]
-import { resolve } from 'path'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vite'
 
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
 export default defineConfig({
   build: {
     lib: {