React 多域名跨域解决方案：反向代理配置指南

在 React 应用的正式环境中处理多个域名跨域问题时，通常需要在后端服务器上进行配置。以下是一种常见的解决方案：

在后端服务器上配置反向代理（Reverse Proxy）。

如果你使用的是 Nginx 服务器，你可以通过在 Nginx 配置文件中添加'proxy_pass'指令来实现反向代理。例如：

server {
    listen 80;
    server_name your-domain.com;

    location /api1 {
        proxy_pass http://api1.example.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location /api2 {
        proxy_pass http://api2.example.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 其他配置...
}

如果你使用的是 Apache 服务器，你可以通过在 Apache 配置文件中添加'ProxyPass'指令来实现反向代理。例如：

<VirtualHost *:80>
    ServerName your-domain.com

    ProxyPass "/api1" 'http://api1.example.com'
    ProxyPassReverse "/api1" 'http://api1.example.com'

    ProxyPass "/api2" 'http://api2.example.com'
    ProxyPassReverse "/api2" 'http://api2.example.com'

    # 其他配置...
</VirtualHost>

配置完成后，将 React 应用打包为静态文件，并部署到后端服务器上。
这样，当 React 应用在正式环境中运行时，所有以'/api1'开头的请求都会被反向代理到'http://api1.example.com'，以'/api2'开头的请求会被代理到'http://api2.example.com'。这样就解决了跨域问题。

请注意，上述解决方案中的配置取决于你使用的后端服务器。具体的配置细节可能会有所不同。你需要根据你的服务器和具体需求进行相应的配置。