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