彻底解决Ant Design Pro跨域难题：从开发到生产的完美配置指南

彻底解决Ant Design Pro跨域难题：从开发到生产的完美配置指南

【免费下载链接】ant-design-pro 👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro! 项目地址: https://gitcode.com/gh_mirrors/an/ant-design-pro

你是否还在为Ant Design Pro项目中的跨域问题头疼不已？开发环境接口调用正常，一到生产环境就报CORS错误？本文将带你从根源解决跨域难题，掌握开发环境与生产环境的最佳配置方案，让前后端数据交互畅通无阻。

读完本文你将学到：

• 开发环境中如何通过Umi代理快速解决跨域
• 生产环境下Nginx反向代理的完整配置
• 常见跨域错误的诊断与解决方案
• 不同环境下的配置文件最佳实践

跨域问题的根源与解决方案概览

跨域（Cross-Origin Resource Sharing，跨域资源共享）是浏览器出于安全考虑实施的同源策略限制。当前端应用与后端API不在同一域名、端口或协议时，就会触发跨域问题。

Ant Design Pro解决跨域的两种核心方案：

1. 开发环境：使用Umi内置的代理功能，在本地开发服务器层转发请求
2. 生产环境：通过Nginx等Web服务器配置反向代理，统一域名访问

开发环境跨域解决方案

Ant Design Pro基于Umi框架构建，Umi提供了强大的代理功能，可以在开发阶段轻松解决跨域问题。核心配置文件为config/proxy.ts。

配置Umi代理

1. 打开代理配置文件config/proxy.ts，找到dev配置项（默认被注释）
2. 取消注释并修改为你的后端API地址：

dev: {
  // localhost:8000/api/** -> https://your-backend-api.com/api/**
  '/api/': {
    target: 'https://your-backend-api.com',
    changeOrigin: true,
    // 可选：如果后端接口没有/api前缀，可以重写路径
    // pathRewrite: { '^/api': '' },
  },
}

配置参数详解

参数	说明	必要性
target	后端API的基础URL	必须
changeOrigin	是否修改请求头中的Origin字段	必须
pathRewrite	路径重写规则，用于调整API路径	可选
secure	是否验证SSL证书，开发环境可设为false	可选

接口调用示例

配置完成后，前端接口调用无需写完整URL，直接使用相对路径即可：

// src/services/ant-design-pro/api.ts 中的接口调用示例
export async function currentUser(options?: { [key: string]: any }) {
  return request<{
    data: API.CurrentUser;
  }>('/api/currentUser', {  // 直接使用相对路径，Umi会自动代理到target配置的地址
    method: 'GET',
    ...(options || {}),
  });
}

生产环境跨域解决方案

生产环境下，Umi的代理功能不再生效，我们需要通过Web服务器（如Nginx）配置反向代理来解决跨域问题。项目中已提供Nginx配置文件，我们可以在此基础上进行修改。

Nginx反向代理配置

修改Nginx配置文件，添加API代理配置：

server {
    listen 80;
    server_name your-domain.com;  # 你的域名
    root /usr/share/nginx/html;
    index index.html;

    # 前端页面路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API反向代理配置
    location /api/ {
        proxy_pass https://your-backend-api.com/api/;  # 后端API地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

配置说明

• location /api/：匹配所有以/api/开头的请求
• proxy_pass：指定后端API的实际地址
• 四个proxy_set_header配置用于将客户端信息传递给后端服务器

部署流程

1. 构建前端项目：npm run build
2. 将构建产物部署到Nginx的root目录
3. 替换Nginx配置并重启服务：nginx -s reload

常见问题与解决方案

404错误

症状：代理配置后接口返回404

可能原因：

• 后端API地址不正确
• 路径重写规则配置错误

解决方案： 检查config/proxy.ts中的target是否正确，路径重写规则是否符合后端接口要求。

504超时错误

症状：请求代理后长时间无响应，最终返回504

可能原因：

• 后端服务未启动或不可访问
• 网络问题导致无法连接后端服务

解决方案： 确认后端服务是否正常运行，可通过curl命令测试后端接口是否可访问。

跨域错误依旧存在

症状：配置代理后仍然出现CORS错误

可能原因：

• 开发环境：未重启开发服务器
• 生产环境：Nginx配置未正确生效

解决方案：

• 开发环境：重启Umi开发服务器
• 生产环境：检查Nginx配置是否正确并重启服务

配置文件管理最佳实践

为了便于不同环境的配置管理，建议采用以下实践：

1. 版本控制：将config/proxy.ts和Nginx配置文件纳入版本控制
2. 环境区分：在config/proxy.ts中为不同环境（dev、test、pre）配置不同的代理规则
3. 文档说明：在配置文件中添加详细注释，说明各配置项的用途

// [config/proxy.ts](https://link.gitcode.com/i/db58988eaf82ec147735198f5d5b8115)中的多环境配置示例
export default {
  dev: {
    '/api/': {
      target: 'http://localhost:8080',  // 本地开发后端
      changeOrigin: true,
    },
  },
  test: {
    '/api/': {
      target: 'https://test-api.your-domain.com',  // 测试环境后端
      changeOrigin: true,
    },
  },
  pre: {
    '/api/': {
      target: 'https://pre-api.your-domain.com',  // 预发布环境后端
      changeOrigin: true,
    },
  },
};

总结

通过本文介绍的两种方案，你可以完美解决Ant Design Pro在开发和生产环境中的跨域问题：

• 开发环境：使用config/proxy.ts配置Umi代理
• 生产环境：通过Nginx配置文件设置反向代理

正确配置后，前端可以通过相对路径src/services/ant-design-pro/api.ts中的方式调用后端接口，无需担心跨域问题。

希望本文能帮助你彻底解决Ant Design Pro的跨域难题，让开发过程更加顺畅！如果你有其他问题或更好的解决方案，欢迎在评论区分享。

点赞收藏本文，下次遇到跨域问题不迷路！下期我们将介绍Ant Design Pro的性能优化技巧，敬请期待。

【免费下载链接】ant-design-pro 👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro! 项目地址: https://gitcode.com/gh_mirrors/an/ant-design-pro