k8s上nginx代理部署与跨域配置

原创

philentso

修改于 2026-06-14 15:19:46

940

文章被收录于专栏：philentsophilentso

说明:

在日常业务部署中,我们业务前端需要代理后端API接口,会发生跨域等问题;
此文档也加入了支持 Vue/React History 路由配置;
业务部分就不写了, 以下是干货直接复制改为自己项目环境就能实现业务需求;

大概说下现在的部署架构:

现有架构：

frontend-app（platform）→ 调用 cors-proxy-gateway（端口8303）→ 反向代理到 auth-gateway（端口18303/80）
cors-proxy 的作用是：处理跨域CORS头 + 反向代理转发到 auth-gateway

K8s中的情况：

platform 在 iot 命名空间
auth-gateway 在 base 命名空间，如ClusterIP为 10.30.5.5

所以需要在 iot 命名空间部署一个 cors-proxy，用 nginx 处理CORS后转发到 auth-gateway.base.svc.cluster.local。

# cors-proxy ConfigMap - nginx配置
apiVersion: v1
kind: ConfigMap
metadata:
  name: cors-proxy-conf
  namespace: iot
data:
  default.conf: |
    server {
        listen 80;
        server_name _;

        location / {
            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin      $http_origin always;
                add_header Access-Control-Allow-Methods     'GET, POST, PUT, DELETE, PATCH, OPTIONS' always;
                add_header Access-Control-Allow-Headers     'Authorization, Content-Type, Accept, X-Requested-With, Token, X-Token, Tenant-Id, x-access-token, username' always;
                add_header Access-Control-Allow-Credentials 'true' always;
                add_header Access-Control-Expose-Headers    'Content-Disposition,content-disposition' always;
                add_header Access-Control-Max-Age           86400;
                return 204;
            }

            proxy_pass         http://auth-gateway.base.svc.cluster.local:80;
            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_read_timeout 60s;

            proxy_hide_header  Access-Control-Allow-Origin;
            proxy_hide_header  Access-Control-Allow-Headers;
            proxy_hide_header  Access-Control-Allow-Methods;
            proxy_hide_header  Access-Control-Allow-Credentials;

            add_header Access-Control-Allow-Origin      $http_origin always;
            add_header Access-Control-Allow-Methods     'GET, POST, PUT, DELETE, PATCH, OPTIONS' always;
            add_header Access-Control-Allow-Headers     'Authorization, Content-Type, Accept, X-Requested-With, Token, X-Token, Tenant-Id, x-access-token, username' always;
            add_header Access-Control-Allow-Credentials 'true' always;
        }
    }

---
# cors-proxy Deployment
apiVersion: apps/v1
kind: Deployment
metadata:
  name: cors-proxy-gateway
  namespace: iot
  labels:
    app: cors-proxy-gateway
spec:
  replicas: 1
  selector:
    matchLabels:
      app: cors-proxy-gateway
  template:
    metadata:
      labels:
        app: cors-proxy-gateway
    spec:
      containers:
        - name: cors-proxy-gateway
          image: nginx:stable-alpine
          ports:
            - containerPort: 80
          volumeMounts:
            - name: nginx-conf
              mountPath: /etc/nginx/conf.d/default.conf
              subPath: default.conf
              readOnly: true
          resources:
            requests:
              cpu: 50m
              memory: 64Mi
            limits:
              cpu: 200m
              memory: 128Mi
      volumes:
        - name: nginx-conf
          configMap:
            name: cors-proxy-conf

---
# cors-proxy Service
apiVersion: v1
kind: Service
metadata:
  name: cors-proxy-gateway
  namespace: iot
  labels:
    app: cors-proxy-gateway
spec:
  selector:
    app: cors-proxy-gateway
  ports:
    - name: http
      port: 80
      targetPort: 80
  type: ClusterIP

关键说明：

对比项	Docker 原方案	K8s 方案
转发目标	host.docker.internal:18303	auth-gateway.base.svc.cluster.local:80
cors-proxy 暴露	宿主机 8303 端口	ClusterIP cors-proxy-gateway:80
frontend 调用地址	http://宿主机IP:8303	http://cors-proxy-gateway

部署后，platform 前端的 API BaseURL 需要从原来的 http://IP:8303 改为 http://cors-proxy-gateway（同命名空间内可直接用短域名），或者根据前端实际配置方式（Ingress/环境变量）对应调整。

默认页面(加入dist文件)

cat > "platform-configmap.yaml" << 'EOF'
apiVersion: v1
kind: ConfigMap
metadata:
  name: platform-nginx-config
  namespace: iot
data:
  nginx.conf: |
    server {
        listen 80;
        server_name _;
        root /usr/share/nginx/html;
        index index.html;

        # 支持 Vue/React History 路由
        location / {
            try_files $uri $uri/ /index.html;
        }

        # 静态资源缓存
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires 7d;
            add_header Cache-Control "public, no-transform";
        }
        add_header Access-Control-Expose-Headers "Content-Disposition,content-disposition" always;
        add_header X-Frame-Options "SAMEORIGIN";
        add_header X-Content-Type-Options "nosniff";
        gzip on;
        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    }
EOF

# 应用 ConfigMap
kubectl apply -f platform-configmap.yaml

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

kubernetes-ingress