Passing a file from frontend to middleware goes into CORS issue

I am using react-node in my project. And I am uploading a file from my laptop, and the front-end is supposed to send it to the backend. While everything works smoothly on my local, when I deploy this on kubernetes I end up in the following errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://MY_BACKEND_LINK. (Reason: header ‘type’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://MY_BACKEND_LINK. (Reason: CORS request did not succeed). Status code: (null).

Error TypeError: NetworkError when attempting to fetch resource

My nginx-ingress file looks like the following:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: gateway-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    #nginx.ingress.kubernetes.io/rewrite-target: "/"
    nginx.ingress.kubernetes.io/enable-cors: "true"
    nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS"
    nginx.ingress.kubernetes.io/cors-allow-headers: "*"
    nginx.ingress.kubernetes.io/cors-allow-origin: "$http_origin"
    nginx.ingress.kubernetes.io/proxy-body-size: 50m
    nginx.ingress.kubernetes.io/configuration-snippet: |
      more_set_headers "Access-Control-Allow-Origin: *";
spec:
  rules:
...

I have checked other resources such as CORS problem if "Content-type": "multipart/form-data" or the official nginx kubernetes documentation https://kubernetes.github.io/ingress-nginx/, and I acted accordingly: set the headers to "*" and increased the file size to 50m. Though the error persisted. So I ended up to this GitHub thread that explained they solved it with this approach. So my nginx config file changed to this:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: gateway-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    #nginx.ingress.kubernetes.io/rewrite-target: "/"
    nginx.ingress.kubernetes.io/enable-cors: "true"
    nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS"
    nginx.ingress.kubernetes.io/cors-allow-headers: "*"
    nginx.ingress.kubernetes.io/cors-allow-origin: "$http_origin"
    nginx.ingress.kubernetes.io/proxy-body-size: "0"
    nginx.ingress.kubernetes.io/proxy-read-timeout: "600"
    nginx.ingress.kubernetes.io/proxy-send-timeout: "600"
    nginx.ingress.kubernetes.io/configuration-snippet: |
      more_set_headers "Access-Control-Allow-Origin: *";
spec:
  rules:
...

But once again, no luck. The same errors come up. Am I doing something wrong in my nginx file? How can I pass my file from the front-end to the back-end without encountering the CORS issue?

Solution 1:

At the very end it was something more trivial then I expected. The nginx file should start with apiVersion: extensions/v1 and not with apiVersion: networking.k8s.io/v1.

Complete file:

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/proxy-body-size: "0"
    nginx.ingress.kubernetes.io/proxy-read-timeout: "600"
    nginx.ingress.kubernetes.io/proxy-send-timeout: "600"
    kubernetes.io/tls-acme: 'true'
  name: gateway-ingress
spec:
...