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,
};

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 cors middleware defaults, used when server.cors is true, are:

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

When server.cors is omitted, Rsbuild uses the defaultAllowedOrigins shown above. When you pass an object, its options are merged with these Rsbuild defaults.

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);
        });
      },
    },
  },
};

#server.cors

#Example

#Options

#origin

server.cors

Example

Options

origin