qiankun主应用访问子应用出现跨域如何处理

在使用 qiankun 时，主应用和子应用可能会部署在不同的域名或端口下，这可能会导致跨域问题。为了处理跨域问题，可以使用以下几种方法：

1. 配置 CORS（跨域资源共享）

在子应用的服务器上配置 CORS 头，允许主应用的域名访问子应用的资源。

使用 Nginx 配置 CORS

如果你使用 Nginx 作为静态文件服务器，可以在 Nginx 配置文件中添加 CORS 头。

server {
    listen 80;

    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;

        # 添加 CORS 头
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept';
    }
}

2. 使用 proxy 代理请求

在开发环境中，可以使用 create-react-app 提供的 proxy 配置来代理请求，避免跨域问题。

主应用的 package.json

在主应用的 package.json 中配置 proxy 字段，代理到子应用的地址。

{
  "name": "main-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "qiankun": "^2.4.0",
    "react-router-dom": "^6.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": {
    "/main/sub-app-1": {
      "target": "http://localhost:7100",
      "changeOrigin": true,
      "pathRewrite": {
        "^/main/sub-app-1": ""
      }
    },
    "/main/sub-app-2": {
      "target": "http://localhost:7200",
      "changeOrigin": true,
      "pathRewrite": {
        "^/main/sub-app-2": ""
      }
    }
  }
}

3. 使用 http-proxy-middleware

在开发环境中，主应用可以使用 http-proxy-middleware 来代理请求，避免跨域问题。

安装 http-proxy-middleware

npm install http-proxy-middleware --save

创建 setupProxy.js

在主应用的 src 目录下创建 setupProxy.js 文件，并配置代理。

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/main/sub-app-1',
    createProxyMiddleware({
      target: 'http://localhost:7100',
      changeOrigin: true,
      pathRewrite: {
        '^/main/sub-app-1': '',
      },
    })
  );
  app.use(
    '/main/sub-app-2',
    createProxyMiddleware({
      target: 'http://localhost:7200',
      changeOrigin: true,
      pathRewrite: {
        '^/main/sub-app-2': '',
      },
    })
  );
};

4. 在开发环境devServer中配置 Access-Control-Allow-Origin

    headers: {
      'Access-Control-Allow-Origin': '*'
    }

5. 使用 Docker 配置 Nginx 代理

在生产环境中，可以使用 Nginx 作为反向代理服务器，代理主应用和子应用的请求。

主应用的 Nginx 配置

在主应用的 Nginx 配置文件中，配置反向代理。

server {
    listen 80;

    server_name localhost;

    location / {
        proxy_pass http://localhost:8000;
        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 /main/sub-app-1/ {
        proxy_pass http://localhost:7100/;
        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 /main/sub-app-2/ {
        proxy_pass http://localhost:7200/;
        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;
    }
}