I have a Laravel backend API and an Angular frontend. I deploy them with Kubernetes ⎈ on Minikube.

NAME                                      READY   STATUS    RESTARTS      AGE
pod/backend-deployment-bd4f98697-c2scp    1/1     Running   1 (22m ago)   23m
pod/frontend-deployment-8bc989f89-cxj67   1/1     Running   0             23m
pod/mysql-0                               1/1     Running   0             23m

NAME                       TYPE        CLUSTER-IP      EXTERNAL-IP   PORT(S)          AGE
service/backend-service    NodePort    10.108.40.53    <none>        8000:30670/TCP   23m
service/frontend-service   NodePort    10.105.57.226   <none>        4200:32353/TCP   23m
service/kubernetes         ClusterIP   10.96.0.1       <none>        443/TCP          25m
service/mysql              ClusterIP   None            <none>        3306/TCP         23m

NAME                                  READY   UP-TO-DATE   AVAILABLE   AGE
deployment.apps/backend-deployment    1/1     1            1           23m
deployment.apps/frontend-deployment   1/1     1            1           23m

NAME                                            DESIRED   CURRENT   READY   AGE
replicaset.apps/backend-deployment-bd4f98697    1         1         1       23m
replicaset.apps/frontend-deployment-8bc989f89   1         1         1       23m

NAME                     READY   AGE
statefulset.apps/mysql   1/1     23m

I can access both the front service and the back service with minikube service SERVICE-NAME.

• This work perfectly. ✅
  

I have also an Ingress for the frontend.

NAME               CLASS    HOSTS                          ADDRESS     PORTS   AGE
frontend-ingress   <none>   kubiapp-frontend-group35.com   localhost   80      27m

I can access the Ingress with a curl. curl http://kubiapp-frontend-group35.com. ✅
But, when I check the URL on a browser, I get some CORS errors.

• The Ingress works but I have CORS Error. ❌

frontend-ingress:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/enable-cors: "true"
    nginx.ingress.kubernetes.io/cors-allow-origin: "*"
    nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS, DELETE"
    nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,X-CustomHeader,X-LANG,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,X-Api-Key,X-Device-Id,Access-Control-Allow-Origin"
  name: frontend-ingress
  labels:
    name: frontend-ingress
spec:
  rules:
    - host: kubiapp-frontend-group35.com
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: frontend-service
                port:
                  number: 4200

I don't understand the Ingress annotation well, does it enable CORS policy for the Frontend? Shouldn't I make it for the Backend? Do I have to create a Backend Ingress?

EDIT:

The error message was:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://backend-service:8000/api/health. (Reason: CORS request did not succeed). Status code: (null).

TL;DR :

I can access the Ingress URL, but I have CORS errors. How to solve it with Kubernetes

CodePudding user response：

The mistake I made was using the Kubernetes annotations for the Frontend Ingress. What I had to do was create a Backend Ingress as well, that used the annotations:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/enable-cors: "true"
    nginx.ingress.kubernetes.io/cors-allow-origin: "*"
    nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS, DELETE"
    nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,X-CustomHeader,X-LANG,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,X-Api-Key,X-Device-Id,Access-Control-Allow-Origin"
  name: backend-ingress
  labels:
    name: backend-ingress
spec:
  rules:
    - host: kubiapp-backend-group35.com
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: backend-service
                port:
                  number: 8000

The frontend app, will now communicate correctly with http://kubiapp-backend-group35.com.