Network Proxy#

Local Proxy#

Modern.js provides a way to configure the development proxy in tools.devServer. For example, to proxy the local interface to an online address:

import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  tools: {
    devServer: {
      proxy: {
        '/go/api': {
          target: 'http://www.example.com/',
          changeOrigin: true,
        },
      },
    },
  },
});

When access http://localhost:8080/go/api, the response content will be returned from http://www.example.com/.

Global Proxy#

Modern.js provides an out-of-the-box global proxy plugin @modern-js/plugin-proxy, which is based on whistle and can be used to view and modify the requests and responses of HTTP/HTTPS, as well as be used as an HTTP proxy server.

Setting Proxy Rules#

After installing the proxy plugin and configuring the rules, run pnpm run dev. Modern.js will automatically enable the proxy server when the development server is started.

Specific proxy rules can be set via the dev.proxy or the config/proxy.js file.

Proxy Dashboard#

After installing the proxy plugin and configuring the proxy rules, run the pnpm run dev command:

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

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

You can see that the proxy server has started successfully in the console.

Access http://localhost:8899, and you can set the rules through the dashboard.