dev.proxy#

• Type: string | Object
• Default: null

This option is used to configure a global proxy based on 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:

npm add @modern-js/plugin-proxy -D

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

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:

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 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:

export default defineConfig({
  dev: {
    proxy: './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:

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: