网络代理#

本地代理#

Modern.js 在 tools.devServer 中提供了配置开发环境代理的方式。例如，将本地开发接口，代理到线上某个地址：

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

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

请求 http://localhost:8080/go/api 时，会从 http://www.example.com/ 返回响应内容。

全局代理#

Modern.js 提供了开箱即用的全局代理插件 @modern-js/plugin-proxy，该插件底层基于 whistle，可用来查看、修改 HTTP/HTTPS 的请求和响应，也可作为 HTTP 代理服务器使用。

设置代理规则#

引入代理插件并填写规则后，执行 pnpm run dev，Modern.js 会在开发服务器启动之后，自动启用代理服务器。

具体代理规则，可通过 dev.proxy 选项或 config/proxy.js 文件进行设置。

代理服务器 UI 界面#

安装代理插件并配置代理规则后， 执行 pnpm run dev 命令：

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

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

在控制台中可以看到代理服务器成功启动。

访问 http://localhost:8899，显示下图所示的 UI 界面后，即可通过界面设置规则。