Umi 代理配置：快速启动你的前端开发

在Umi框架开发过程中，代理API请求到后端服务器是一种常见的需求，它可以帮助我们解决跨域问题。Umi提供了一种简便的方式来配置API代理，使我们能够轻松地在开发过程中进行代理配置。

一、为什么需要代理配置？

1. 跨域请求问题： 当前端应用和后端服务器运行在不同的域名下时，就会产生跨域请求问题。由于浏览器的同源策略，前端应用无法直接向后端服务器发送请求。
2. 解决跨域问题： 代理配置可以通过在前端应用和后端服务器之间建立一个代理服务器来解决跨域问题。代理服务器可以将前端应用的请求转发到后端服务器，并把后端服务器的响应转发回前端应用。这样，前端应用就可以通过代理服务器间接访问后端服务器，从而解决跨域问题。

二、Umi代理配置的优势

1. 简便易用： Umi提供了一种开箱即用的代理配置方式，只需简单的配置即可实现代理功能。
2. 强大灵活： Umi代理配置支持多种代理规则，可以满足不同的代理需求。
3. 自动代理： Umi可以自动检测前端应用中的API请求并自动将其转发到后端服务器，无需手动配置代理规则。

三、如何配置Umi代理

1. 安装代理包

npm install --save umi-request-proxy

2. 配置package.json

在package.json中添加代理配置：

{
  "name": "umi-app",
  "scripts": {
    "start": "umi dev",
    "proxy": "umi request-proxy"
  },
  "dependencies": {
    "umi": "^4.0.0",
    "umi-request-proxy": "^1.0.0"
  }
}

3. 启动代理服务器

在终端中运行以下命令：

npm run proxy

4. 使用代理

在前端代码中使用代理，可以使用umi-request-proxy提供的createProxy方法：

import { createProxy } from 'umi-request-proxy';

const proxy = createProxy({
  target: 'http://localhost:8080', // 后端服务器地址
  paths: ['/api/*'], // 需要代理的路径
});

export default proxy;

四、配置代理规则

Umi代理配置支持多种代理规则，可以通过在配置文件中配置代理规则来实现不同的代理需求。

1. 代理单个API请求

{
  "/api/user": {
    "target": "http://localhost:8080",
    "changeOrigin": true
  }
}

2. 代理多个API请求

{
  "/api/*": {
    "target": "http://localhost:8080",
    "changeOrigin": true
  }
}

3. 代理所有API请求

{
  "target": "http://localhost:8080",
  "changeOrigin": true
}

五、代理配置注意事项

1. 端口冲突： 代理服务器需要占用一个端口，如果这个端口已经被其他应用程序占用，则代理服务器将无法启动。
2. 跨域请求凭证： 默认情况下，代理服务器不会携带跨域请求凭证，如cookies、authorization等。如果需要携带这些凭证，需要在代理配置中显式设置withCredentials属性。
3. 代理请求超时： 代理服务器可能存在请求超时的问题，导致前端应用中的API请求超时。可以适当调整代理服务器的超时时间来解决这个问题。