代理

在 Umi.js 中配置代理可以帮助你解决开发环境下的跨域问题，尤其是在前后端分离的项目中。通过设置代理，你可以让前端请求转发到后端服务器，而不需要修改请求地址或使用浏览器插件来绕过跨域限制。

配置代理的方式

Umi.js 提供了两种主要的方式来配置代理：

1. 直接在 .umirc.js 或 config/config.js 文件中配置
2. 使用 umi plugin-proxy 插件

方法 1：直接在配置文件中配置代理

这是最常见和推荐的方法，适用于大多数场景。你可以在项目的配置文件（.umirc.js 或 config/config.js）中添加 proxy 配置项来设置代理规则。

示例：基本代理配置

// .umirc.js 或 config/config.js
export default {
  proxy: {
    "/api": {
      target: "http://your-backend-server.com", // 目标服务器地址
      changeOrigin: true, // 是否改变源，对于某些后端是必需的
      pathRewrite: { "^/api": "" }, // 重写路径，去掉前缀
    },
  },
};

解释：

• target：目标服务器的 URL。
• changeOrigin：是否更改请求头中的主机名，这通常用于处理 CORS 问题。
• pathRewrite：用于重写请求路径，例如将 /api/users 转发为 /users。

多个代理规则

如果你有多个 API 接口需要不同的代理规则，可以分别配置：

export default {
  proxy: {
    "/api/v1": {
      target: "http://backend-v1.com",
      changeOrigin: true,
      pathRewrite: { "^/api/v1": "/v1" },
    },
    "/api/v2": {
      target: "http://backend-v2.com",
      changeOrigin: true,
      pathRewrite: { "^/api/v2": "/v2" },
    },
  },
};

方法 2：使用 umi-plugin-proxy 插件

虽然直接在配置文件中配置代理已经足够满足大部分需求，但如果你有更复杂的代理逻辑，或者希望有更多的灵活性，可以考虑使用 umi-plugin-proxy 插件。

安装插件

首先安装插件：

npm install umi-plugin-proxy --save-dev

修改配置文件

然后在配置文件中启用插件，并定义代理规则：

// .umirc.js 或 config/config.js
import proxy from "umi-plugin-proxy";

export default {
  plugins: [proxy()],
  proxy: {
    "/api": {
      target: "http://your-backend-server.com",
      changeOrigin: true,
      pathRewrite: { "^/api": "" },
    },
  },
};

注意事项

• 开发环境专用：代理配置只在开发环境中有效，生产构建时会被忽略。因此，确保你的生产环境中有适当的 CORS 配置或其他机制来处理跨域请求。

• WebSocket 支持：如果你的应用使用 WebSocket，可以在代理配置中添加 ws: true 来支持 WebSocket 请求的代理。

  export default {
    proxy: {
      "/ws": {
        target: "ws://your-websocket-server.com",
        ws: true,
        changeOrigin: true,
      },
    },
  };

• 调试信息：为了更好地调试代理请求，可以在启动应用时添加 -p 参数以显示详细的代理日志。

  npm run start -p

总结

通过上述方法，你可以在 Umi.js 项目中轻松配置代理，从而有效地解决开发环境下的跨域问题。选择适合你项目需求的配置方式，并根据实际情况调整代理规则，可以显著提高开发效率并简化请求管理。