CSS was not loaded because its MIME type

Help!
1

Hello everyone.

I’m facing a problem loading stylesheets for an application that is behind a HAProxy. The application was written in Java, and runs on a Tomcat server, as shown in the sketch below.

                     ┌─────────┐
		 ┌──433/tcp─►│ HAProxy │──────────┐
		 │           └─────────┘		  │
		 │		   					   8080/tcp
		 │                                ▼
	┌────┴────┐		                 ┌────┴────┐
	│ client  ├────────────8083/tcp─►│ Tomcat  │
	└─────────┘				 	     └─────────┘

When directly accessing the application on the target server via port 8083/tcp, the interface is displayed normally.
However, when accessing the application 433/tcp, via the reverse proxy, I get the following error messages, which indicates that the problem is being generated by HAProxy.

image
image1101×83 3.03 KB

All links to the stylesheets are defined correctly and follow the pattern below:

<link rel="stylesheet" type="text/css" href="/folder/mystyle.css">

All paths are correct because when clicking on the error link, the respective CSS files are displayed by the browser.

Below are the headers returned for the same CSS file:

Straight Tomcat port
Straight Tomcat port518×726 16.5 KB

Through HAProxy
Through HAProxy518×726 20 KB

Is there any way to disable this MIME type check in the backend configuration?

2

This is incorrect, haproxy just transparently passes requests to the backend server and responses to the client on the frontend, unless explicitly configured to change requests or responses.

Likely the answer of your backend server is a 404 Not Found or 403 Forbidden. Actually look at the content of this text/plain response to find out.

Reasons for this are often: the backend server expects a different host header or a different path than what was in the requests.

For example if the backend server usually gets a host header www.example.org:8080 and now it gets a different host header, the vserver mapping may point somewhere else and therefor, the files cannot be found. In that case the Host header can be rewritten with:

http-request set-header Host www.example.org:8080

The same is true for path, which comes up when people try to content switch by looking at the url, things like:

use_backend application1 if { path_beg app1 }

This generally does not work, because haproxy will not rewrite CSS references in the HTML response and therefor the CSS points to the wrong place. Use different Hostnames to content switch between different applications can help here.

1 Like