2

I'm trying to modularize my front-end which is in Angular-JS, with it we are using HA-proxy as a load balancer and K8s.

Each ACL in the HA-proxy configuration is attached to a different service in K8s and since we are using Angular with the (hash-bang enabled), in the HA-proxy configuration file we use that as a way to identify the different modules.

Below is my configuration, in HA-proxy which is failing because I can't escape the # in the file even after following the HA Documentation.

acl login-frontend path_beg /\#/login
use_backend login-frontend if login-frontend

acl elc-frontend path_beg /\#/elc
use_backend elc-frontend if elc-frontend

I have tried escaping it as /%23/login and /'#'/admin but without success.

Any idea would be greatly appreciated.

Erik
  • 53
  • 1
  • 9

2 Answers2

2

The fragment (everything followed by a # character) as defined in RFC 3986

As with any URI, use of a fragment identifier component does not imply that a retrieval action will take place. A URI with a fragment identifier may be used to refer to the secondary resource without any implication that the primary resource is accessible or will ever be accessed.

and it is used on the client side, therefore a client (a browser, a curl, ...) does not send it with a request. As reference: Is the URL fragment identifier sent to the server?

So there is no point to route/acl with it. The reason why haproxy provide an escape sequence for that is you may want to include it with a body, a custom header... but again, you will not obtain that part from the request line (the first line with URI).

Community
  • 1
  • 1
kwarunek
  • 12,141
  • 4
  • 43
  • 48
0

What is really happening here is the user is requesting from HAProxy / and Angular, in the user's browser, is then parsing the #/logic and #/elc part to decide what to do next.

I ran into a similar problem with my Ember app. For SEO purposes I split out my "marketing" pages and my "app" pages.

I then mounted my Ember application at /app and had HAProxy route requests to the backend that serviced my Ember app. A request for "anything else" (i.e. /contact-us) was routed to the backend that handled marketing pages.

  • /app/* -> server1 (Ember pages)
  • / -> server2 (static marketing pages)

Since I had some urls floating around out there on the web that still pointed to things like /#/login but really they should now be /app/#/login what I had to do was edit the index.html page being served by my marketing backend and add Javascript to that page that parsed the url. If it detected a /#/login it forced a redirect to /app/#/login instead.

I hope that helps you figure out how to accomplish the same for your Angular app.

ThaDon
  • 7,826
  • 9
  • 52
  • 84