- **Type:** `string | Object`
- **Default:** `null`

This option is used to configure a global proxy based on [whistle](https://wproxy.org/whistle/) in the development environment, which can be used to view and modify HTTP/HTTPS requests, responses, and can also be used as a proxy server.

### Register Plugin

Before using this option, you need to install and register the `@modern-js/plugin-proxy` plugin:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @modern-js/plugin-proxy -D" />

After the installation, please register the plugin in the `modern.config.ts` file:

```ts title="modern.config.ts"
import { appTools, defineConfig } from '@modern-js/app-tools';
import { proxyPlugin } from '@modern-js/plugin-proxy';

export default defineConfig({
  plugins: [appTools(), proxyPlugin()],
});
```

### Object Type

When the value of `dev.proxy` is object type, the `key` of the object corresponds to the matching `pattern`, and the `value` of the object corresponds to the matching `target`.

Example:

```ts title="modern.config.ts"
export default defineConfig({
  dev: {
    proxy: {
      'https://www.baidu.com': 'https://google.com.hk',
      // Static files can be returned directly via the file protocol
      'https://example.com/api': 'file://./data.json',
    },
  },
});
```

Please refer to [whistle - Matching Patterns](https://wproxy.org/whistle/pattern.html) for detailed usage.

### String Type

When the value of `dev.proxy` is string type, it can be used to specify a separate proxy file, for example:

```ts title="modern.config.ts"
export default defineConfig({
  dev: {
    proxy: './proxy.js',
  },
});
```

```js title="proxy.js"
module.exports = {
  name: 'my-app',
  rules: `
    ^example.com:8080/api/***   http://localhost:3001/api/$
  `,
};
```

### Start Proxy

Execute `dev`, when the prompt is as follows, the proxy server starts successfully:

```bash
  Local:    http://localhost:8080/
  Network:  http://192.168.0.1:8080/

info      Starting proxy server.....
success   Proxy server start on localhost:8899
```

Access the `localhost:8899` to view the Network and configure proxy rules on the UI interface:

![proxy UI](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/dev-proxy.png)

:::info
The https agent automatically installs the certificate to obtain root privileges. Please enter the password as prompted. ** The password is only used when the certificate is trusted and will not be leaked or used for other links **.

:::
