close
logologo
Guide
Config
Plugin
API
Community
Version
Changelog
Rsbuild 0.x Doc
English
简体中文
Guide
Config
Plugin
API
Community
Changelog
Rsbuild 0.x Doc
English
简体中文
logologo
Overview
root
mode
plugins
logLevel
environments

dev

dev.assetPrefix
dev.browserLogs
dev.cliShortcuts
dev.client
dev.hmr
dev.lazyCompilation
dev.liveReload
dev.progressBar
dev.setupMiddlewares
dev.watchFiles
dev.writeToDisk

resolve

resolve.aliasStrategy
resolve.alias
resolve.conditionNames
resolve.dedupe
resolve.extensions
resolve.mainFields

source

source.assetsInclude
source.decorators
source.define
source.entry
source.exclude
source.include
source.preEntry
source.transformImport
source.tsconfigPath

output

output.assetPrefix
output.charset
output.cleanDistPath
output.copy
output.cssModules
output.dataUriLimit
output.distPath
output.emitAssets
output.emitCss
output.externals
output.filenameHash
output.filename
output.injectStyles
output.inlineScripts
output.inlineStyles
output.legalComments
output.manifest
output.minify
output.module
output.overrideBrowserslist
output.polyfill
output.sourceMap
output.target

html

html.appIcon
html.crossorigin
html.favicon
html.inject
html.meta
html.mountId
html.outputStructure
html.scriptLoading
html.tags
html.templateParameters
html.template
html.title

server

server.base
server.compress
server.cors
server.headers
server.historyApiFallback
server.host
server.htmlFallback
server.https
server.middlewareMode
server.open
server.port
server.printUrls
server.proxy
server.publicDir
server.strictPort

security

security.nonce
security.sri

tools

tools.bundlerChain
tools.cssExtract
tools.cssLoader
tools.htmlPlugin
tools.lightningcssLoader
tools.postcss
tools.rspack
tools.styleLoader
tools.swc

performance

performance.buildCache
performance.bundleAnalyze
performance.chunkSplit
performance.dnsPrefetch
performance.preconnect
performance.prefetch
performance.preload
performance.printFileSize
performance.profile
performance.removeConsole
performance.removeMomentLocale

moduleFederation

moduleFederation.options
📝 Edit this page on GitHub
Previous Pageserver.compress
Next Pageserver.headers

#server.cors

  • Type: boolean | import('cors').CorsOptions
  • Default:
const defaultAllowedOrigins =
  /^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/;

const defaultOptions = {
  // Default allowed:
  // - localhost
  // - 127.0.0.1
  // - [::1]
  origin: defaultAllowedOrigins,
};
  • Version: >= 1.1.11

Configure CORS options for the dev server or preview server, based on the cors middleware.

  • object:Enable CORS with the specified options.
  • true:Enable CORS with default options (allow all origins, not recommended).
  • false:Disable CORS.
WARNING

Using cors: true or cors.origin: '*' exposes your dev server to all origins and can compromise your source code security. We recommend using the origin option to specify an allowlist of trusted origins instead.

#Example

  • Enable CORS for a specific origin:
rsbuild.config.ts
export default {
  server: {
    cors: {
      // Configures the `Access-Control-Allow-Origin` CORS response header
      origin: 'https://example.com',
    },
  },
};
  • Keep the default origin config of Rsbuild and add additional origins:
rsbuild.config.ts
// `defaultAllowedOrigins` is the default origin value of Rsbuild
import { defaultAllowedOrigins } from '@rsbuild/core';

export default {
  server: {
    cors: {
      origin: [defaultAllowedOrigins, 'https://example.com'],
    },
  },
};
  • Only enable CORS for the dev server:
rsbuild.config.ts
const isDev = process.env.NODE_ENV === 'development';

export default {
  server: {
    cors: isDev ? { origin: 'https://example.com' } : false,
  },
};
  • Disable CORS:
rsbuild.config.ts
export default {
  server: {
    cors: false,
  },
};
  • Enable CORS for all origins (not recommended):
rsbuild.config.ts
export default {
  server: {
    // Equivalent to `{ origin: '*' }`
    cors: true,
  },
};

#Options

The cors option can be an object, which is the same as the cors middleware options.

The default configuration is the equivalent of:

const defaultOptions = {
  origin: '*',
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  preflightContinue: false,
  optionsSuccessStatus: 204,
};

#origin

  • Type:
type StaticOrigin =
  | boolean
  | string
  | RegExp
  | Array<boolean | string | RegExp>;

type CustomOrigin = (
  requestOrigin: string | undefined,
  callback: (err: Error | null, origin?: StaticOrigin) => void,
) => void;

type Origin = StaticOrigin | CustomOrigin;

The origin option is used to configure the Access-Control-Allow-Origin header:

rsbuild.config.ts
export default {
  server: {
    cors: {
      origin: 'https://example.com',
    },
  },
};

Specify multiple allowed origins using an array:

rsbuild.config.ts
export default {
  server: {
    cors: {
      origin: [
        /^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/,
        'https://example.com',
      ],
    },
  },
};

Use a regular expression to allow all matching origins:

rsbuild.config.ts
export default {
  server: {
    cors: {
      origin: /\.example\.com$/,
    },
  },
};

Setting origin to a function allows you to dynamically determine the allowed origin, the function receives two parameters:

  • origin:The origin of the incoming request, undefined if no origin is present.
  • callback:A function to set the allowed origin.
rsbuild.config.ts
export default {
  server: {
    cors: {
      origin: (origin, callback) => {
        // loadMyOrigins is an example call to load a list of origins
        loadMyOrigins((error, origins) => {
          callback(error, origins);
        });
      },
    },
  },
};