ant design pro 使用request和proxy解决前端跨域问题

Ant Design Pro 是基于 Ant Design 开发的企业级后台管理系统框架，它处理跨域问题通常会利用内置的 request 组件以及 proxy 配置。

1. **请求拦截器 (Request Interceptor)**: 在 Ant Design Pro 中，你可以通过配置 request 的 interceptors 功能，在发送所有请求之前添加自定义的逻辑，包括设置默认的 headers、处理 token 等。如果你需要处理跨域，可以在拦截器中添加对 CORS 的支持，比如修改请求头 `withCredentials` 或者设置允许的域名 (`Access-Control-Allow-Origin`)。

// 在umi.config.js或者global.js中的请求配置
import axios from 'axios';
axios.defaults.withCredentials = true;
axios.interceptors.request.use(config => {
  if (!config.crossDomain) {
    config.headers.common['X-Requested-With'] = 'XMLHttpRequest'; // 为了某些服务器识别这是AJAX请求
    if (process.env.NODE_ENV === 'production') {
      config.headers.common['Access-Control-Allow-Origin'] = '*'; // 开发环境允许跨域，生产环境需替换为你实际服务的域名
    }
  }
  return config;
}, error => Promise.reject(error));

2. **Proxy**: 如果后端 API 接口不允许直接从浏览器访问（如本地开发环境），可以启用 Node.js 作为代理服务器。在项目根目录下创建一个 `proxy.conf.json` 文件，配置文件内容类似于：

{
  "/api": {
    "target": "http://localhost:8000", // 你需要转发到的实际后端API地址
    "changeOrigin": true,
    "pathRewrite": { "^/api" : "" } // 将路径前缀"/api"替换为空字符串，以便于URL匹配
  }
}

当你向 `/api` 前缀的路径发起请求时，这些请求会被转发到指定的服务器地址。