How to Enable CORS in Kubernetes Ingress Nginx: Step‑by‑Step Guide

Why CORS Matters

As web applications increasingly separate front‑end and back‑end services across different domains, browsers enforce the same‑origin policy, blocking cross‑origin requests. Enabling Cross‑Origin Resource Sharing (CORS) allows controlled access to resources from other origins.

Typical Situations Requiring CORS

Front‑end/Back‑end Separation : Modern apps often deploy UI and APIs on separate servers, triggering CORS checks when the UI fetches data.

Single‑Page Applications (SPA) : Frameworks like React, Vue, or Angular need CORS when their APIs reside on different domains.

Third‑Party API Integration : Calls to external services (social login, maps, analytics) require CORS permissions.

Resource Sharing : Allowing other sites to safely embed your images, stylesheets, or scripts also uses CORS policies.

Ingress Nginx Configuration for CORS

Apply the following manifest to enable CORS on the Ingress controller. Replace the origin with your front‑end domain as needed.

<code>cat <<'EOF' | kubectl apply -f -
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/cors-allow-methods: "GET, POST, OPTIONS"
    nginx.ingress.kubernetes.io/cors-allow-origin: "http://nginx.jiaxzeng.com"
    nginx.ingress.kubernetes.io/enable-cors: "true"
  name: simple
  namespace: default
spec:
  ingressClassName: nginx
  rules:
  - host: simple.jiaxzeng.com
    http:
      paths:
      - backend:
          service:
            name: simple
            port:
              number: 8899
        path: /
        pathType: Prefix
EOF</code>

Important Tips

When specifying

nginx.ingress.kubernetes.io/cors-allow-origin

, include the protocol (e.g.,

http://

) or use "*" to allow all origins.

The default allowed methods are GET, PUT, POST, DELETE, PATCH, and OPTIONS; you can customize them via

cors-allow-methods

.

Verifying the Configuration

After applying the manifest, access the front‑end page (e.g.,

cors.html

) and trigger requests to the back‑end endpoints

/who/hostname

and

/header

. The browser should no longer display CORS errors, confirming that the Ingress now permits cross‑origin traffic.

Conclusion

By properly annotating an Ingress Nginx resource, you can seamlessly enable CORS for your Kubernetes‑hosted services, allowing developers to focus on business logic rather than networking constraints.