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 https://stackoverflow.com/questions/52971336/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?
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:
...