My JavaScript Page is returning blank via the Nginx Ingress

[afsilvasantos]

Hi Guys.
So i was just configuring my nginx ingress, and after making a HTTPS service accessible with HTTPS, i am now facing another problem. The IP and path are resolved and the service returns the webpage (if i inspect the element, it shows the same source code as the a working page i have in another location).
However, it seems that the page internally is not handling the paths well.
So my app works as follows:
https://app-container:portA/mandatory_path
returns the desired behaviour.
So i configured a Service with portB that connects to the application on portA. Within the cluster, if i access service_name:portB/mandatory_path it will load the page as expected.

No on my ingress i configured it like this (note that it has https end to end):

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: cafe-ingress
  namespace: namespacetest
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.org/server-snippets: "server_name ~^.*$;"
    nginx.org/ssl-services: "service-remote-manager-frontend"
    nginx.ingress.kubernetes.io/ssl-passthrough: "true"
    nginx.ingress.kubernetes.io/force-ssl-redirect: "true"
    nginx.ingress.kubernetes.io/backend-protocol: "HTTPS"
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  tls:
  - hosts:
    - cafe.example.com
    secretName: cafe-secret
  rules:
  - host: cafe.example.com
    http:
      paths:
      - path: /tea
        backend:
          serviceName: tea-svc
          servicePort: 80
      - path: /coffee
        backend:
          serviceName: coffee-svc
          servicePort: 80
      - path: /target_location
        backend:
          serviceName: service_name
          servicePort: portB

On the browser i see this in the console:
client.js” was loaded despite its MIME type (“text/html”) not being a valid JavaScript MIME type
...
ReferenceError: rwt is not defined

So now i don't know if there is anything i can change on the path configurations, or if i have to change the web application which i did not develop.

On the Nginx contoller the configuration for this location shows like this:

upstream upstream_name {
      server 10.240.0.51:portA max_fails=1 fail_timeout=10s max_conns=0;
}
 location /target_location{


                proxy_http_version 1.1;


                proxy_connect_timeout 60s;
                proxy_read_timeout 60s;
                proxy_send_timeout 60s;
                client_max_body_size 1m;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header X-Forwarded-Port $server_port;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_buffering on;

                proxy_pass https://upstream_name;


        }

Thanks in advance for the patience!

[Rulox]

Hi @afsilvasantos

It seems, based on your annotations of the type nginx.ingress.kubernetes.io that you are using the Community Ingress Controller that uses NGINX, instead of this project (which is an NGINX Ingress Controller maintained by NGINX Inc).

Could you possibly let me know which one you are using? If you are using the Community one, I suggest you open an issue there as we can't help. If you are using ours, I am afraid those annotations won't work (our annotations are here, they start with nginx.org I see you have them mixed).

Let me know if this makes sense, thanks.

[afsilvasantos]

Hi @Rulox
It is your controller, and i was thinking i was using the community one but then i realised it is the NGINX Inc. one. I will make the change on the annotations. Either way, the request is made to the page sucessfully, it just shows an empty page. Do you know why this might be happening? Or could it be the web page itself?

[Rulox]

Can you first use the rewrite with our annotations? I want to make sure that your application is able to get your static JS files correctly. I see you used the rewrite to /, you can do the same in our Ingress Controller with nginx.org/rewrites, you can see it here.

Let me know if it works after doing the annotations change please, if not, I'll try to help you with other ideas. It seems to me it's a problem with paths of the js statics, so maybe the rewrite can help.

PS: It's difficult to debug this because is most likely due to how the application works. Depending on how the app manages static files/paths maybe a different config is required.

[afsilvasantos]

So i updated the annotations to:

    kubernetes.io/ingress.class: nginx
    nginx.org/server-snippets: "server_name ~^.*$;"
    nginx.org/ssl-services: "service-remote-manager-frontend"
    nginx.org/ssl-passthrough: "true"
    nginx.org/force-ssl-redirect: "true"
    nginx.org/backend-protocol: "HTTPS"
    nginx.org/rewrite-target: /

The behaviour is the same.
I am not sure how the rewrite works. At the path /test i want to pass "test" to that backend also. Imagine, the backend is expecting to be accessed at /test. Do i need rewrite?

[Rulox]

Hi @afsilvasantos

Please pay attention to the annotations in the documentation, changing the prefic to nginx.org won't be enough, annotations have different names too. nginx.org/rewrite-target is not a valid annotation in our Ingress Controller, it should be nginx.org/rewrites. Check the annotations here. Same with the others! (we don't have an annotation for ssl-passthrough for example)

And for your other question, let me know if this example helps you to understand rewrites with the Ingress Controller a little bit better.

PS: One question, do you really need all these annotations for your application? I suggest to start easy and try to make the Ingress Controller work without annotations, except the ones that are necessary for your app to work.

Is your application an JS application? Is it running in a port or you are just showing a static html + js?

[afsilvasantos]

Hi @Rulox
Thank you. Sorry for all this confusion. I removed all and only left the ssl-services, like in the example you have in your github page, and put the rewrites like in that example. That actually seemed to do something now because i checked the configuration file inside the pod, and now the proxy_pass is set to https://upstream_target/mprm like it should.

However now i find a different error in the browser console, stating that the files were loaded despite MIME (“text/html”) not being a valid JavaScript MIME type.

Is your application an JS application? Is it running in a port or you are just showing a static html + js?

It is a Java application that serves an JS page.
EDIT:
Something important, the backend has a self signed certificate. i already made the annotation indicating that the service is ssl. but do i need to define something else?

[afsilvasantos]

Hello.
The issue was finally fixed. The problem was the proxy ssl ciphers and the verification. Since it was a self signed certificate, the request could not validate it.

So after adding

proxy_ssl_verify off;
proxy_ssl_cipher couple of ciphers...;

The page was finally being presented.
Thanks for your help!