<p>I have a <code>Laravel</code> backend API and an <code>Angular</code> frontend. I deploy them with <code>Kubernetes ⎈</code> on <strong>Minikube</strong>.</p>
<pre><code>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    &lt;none&gt;        8000:30670/TCP   23m
service/frontend-service   NodePort    10.105.57.226   &lt;none&gt;        4200:32353/TCP   23m
service/kubernetes         ClusterIP   10.96.0.1       &lt;none&gt;        443/TCP          25m
service/mysql              ClusterIP   None            &lt;none&gt;        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
</code></pre>
<p>I can access both the front service and the back service with <code>minikube service SERVICE-NAME</code>.</p>
<ul>
<li>This work perfectly. ✅<br></li>
</ul>
<hr />
<p>I have also an <code>Ingress</code> for the frontend.</p>
<pre><code>NAME               CLASS    HOSTS                          ADDRESS     PORTS   AGE
frontend-ingress   &lt;none&gt;   kubiapp-frontend-group35.com   localhost   80      27m
</code></pre>
<p>I can access the <code>Ingress</code> with a curl. <code>curl http://kubiapp-frontend-group35.com</code>. ✅<br>
But, when I check the URL on a browser, I get some CORS errors.<br></p>
<ul>
<li>The Ingress works but I have CORS Error. ❌</li>
</ul>
<hr />
<p><code>frontend-ingress</code>:<br></p>
<pre><code>apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: &quot;nginx&quot;
    nginx.ingress.kubernetes.io/enable-cors: &quot;true&quot;
    nginx.ingress.kubernetes.io/cors-allow-origin: &quot;*&quot;
    nginx.ingress.kubernetes.io/cors-allow-methods: &quot;PUT, GET, POST, OPTIONS, DELETE&quot;
    nginx.ingress.kubernetes.io/cors-allow-headers: &quot;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&quot;
  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
</code></pre>
<p>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?<br></p>
<h3>EDIT:</h3>
<p>The error message was:</p>
<blockquote>
<p>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).</p>
</blockquote>
<hr />
<h1>TL;DR :</h1>
<p>I can access the Ingress URL, but I have CORS errors. How to solve it with <code>Kubernetes</code></p>

Hamza Ince
<p>The mistake I made was using the <code>Kubernetes</code> annotations for the Frontend Ingress.
What I had to do was create a Backend Ingress as well, that used the annotations:</p>
<pre><code>apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: &quot;nginx&quot;
    nginx.ingress.kubernetes.io/enable-cors: &quot;true&quot;
    nginx.ingress.kubernetes.io/cors-allow-origin: &quot;*&quot;
    nginx.ingress.kubernetes.io/cors-allow-methods: &quot;PUT, GET, POST, OPTIONS, DELETE&quot;
    nginx.ingress.kubernetes.io/cors-allow-headers: &quot;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&quot;
  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
</code></pre>
<p>The frontend app, will now communicate correctly with <code>http://kubiapp-backend-group35.com</code>.</p>
