Mailing List Archive

Varnish : Varnish not loading CSS and JS.
Hello friends,

I am running magento 2.2.6 on a nginx server. I have Varnish installed
on another dedicated server. When I use it via proxy-pass and contact
varnish server first, I am able to load the magento website, but CSS and
JS are not loading due to strict mime-type issue.

Error log :

|pub/static/version123456/frontend/company/default/de_DE/css/styles-1.min.css
was blocked due to MIME type ("text/html")mismatch
(X-Content-Type-Options:nosniff) |

We don't have no-sniff added in our Nginx configuration.

Varnish config :

default.vcl

|backend server1c {.host ="IP1";.port ="80";.probe ={.url
="/balancer.html";.timeout =500s;.interval =5s;.window =5;.threshold
=3;}}backend server1b {.host ="IP2";.port ="80";.probe ={.url
="/balancer.html";.timeout =500s;.interval =5s;.window =5;.threshold
=3;}}backend server1a {.host ="IP3";.port ="80";.probe ={.url
="/pub/balancer.html";.timeout =500s;.interval =5s;.window =5;.threshold
=3;}}subvcl_recv {# Happens before we check if we have this in cache
already.## Typically you clean up the request here, removing cookies you
don't need,# rewriting the request, etc.if(req.url
=="/lazyload/prices/load/"){return(pass);}if(req.url
=="/roobeo_config/store/changemode/mode/0"){return(pass);}if(req.url
=="/roobeo_config/store/changemode/mode/1"){return(pass);}if(req.url
=="/rest/default/V1/carts/mine/estimate-shipping-methods"){return(pass);}if(req.url
=="/lazywishlist/"){return(pass);}if(req.url
=="/index.php/rest/V1/"){return(pass);}if(req.url
=="/customer/account/createpassword/"){return(pass);}if(req.url
=="/customer/account/resetpasswordpost/"){return(pass);}if(req.url
=="/roobeo_shipping/zipcode/validate/"){return(pass);}if(req.url
=="/roobeo_shipping/zipcode/save/"){return(pass);}if(req.url
=="/roobeo_shipping"){return(pass);}}subvcl_init {newbar
=directors.round_robin();bar.add_backend(server1a);bar.add_backend(server1b);bar.add_backend(server1c);}|


Nginx config :

|location /{proxy_pass http://VARNISH_IP:80;proxy_set_header
Host$http_host;proxy_set_header
X-Forwarded-Host$http_host;proxy_set_header X-Real-IP
$remote_addr;proxy_set_header
X-Forwarded-For$proxy_add_x_forwarded_for;proxy_set_header
Ssl-Offloaded"1";proxy_set_header
X-Forwarded-Protohttps;proxy_set_header
X-Forwarded-Port443;#proxy_hide_header X-Varnish;#proxy_hide_header
Via;proxy_set_header X-Forwarded-Proto$scheme;try_files $uri
$uri//index.php$is_args$args;} Any ideas. Thank you. :-) |


||
Re: Varnish : Varnish not loading CSS and JS. [ In reply to ]
Hi,

I don't think it's related to Varnish.

1. You should not be using pub/ in your URLs. The secure Magento 2
setup assumes that pub/ directory is your web root, so you should end
up with URLs without it.
2. Your CSS/JS is not loaded because they are returning 404s (thus
text/html MIME type, and browser refuses to load them because they are
not scripts/styles, they are HTML error message)

On Tue, Oct 8, 2019 at 4:17 PM, Akshay Sulakhe <kernelfreak@gmail.com>
wrote:
> Hello friends,
>
> I am running magento 2.2.6 on a nginx server. I have Varnish
> installed on another dedicated server. When I use it via proxy-pass
> and contact varnish server first, I am able to load the magento
> website, but CSS and JS are not loading due to strict mime-type issue.
>
> Error log :
>
> pub/static/version123456/frontend/company/default/de_DE/css/styles-1.min.css
> was blocked due to MIME type ("text/html") mismatch
> (X-Content-Type-Options: nosniff)
>
> We don't have no-sniff added in our Nginx configuration.
>
> Varnish config :
>
> default.vcl
>
> backend server1c {
> .host = "IP1";
> .port = "80";
> .probe = {
> .url = "/balancer.html";
> .timeout = 500s;
> .interval = 5s;
> .window = 5;
> .threshold = 3;
> }
> }
>
> backend server1b {
> .host = "IP2";
> .port = "80";
> .probe = {
> .url = "/balancer.html";
> .timeout = 500s;
> .interval = 5s;
> .window = 5;
> .threshold = 3;
> }
> }
>
>
> backend server1a {
> .host = "IP3";
> .port = "80";
> .probe = {
> .url = "/pub/balancer.html";
> .timeout = 500s;
> .interval = 5s;
> .window = 5;
> .threshold = 3;
> }
> }
>
> sub vcl_recv {
> # Happens before we check if we have this in cache already.
> #
> # Typically you clean up the request here, removing cookies you
> don't need,
> # rewriting the request, etc.
> if (req.url == "/lazyload/prices/load/") {
> return(pass);
> }
> if (req.url == "/roobeo_config/store/changemode/mode/0") {
> return(pass);
> }
> if (req.url == "/roobeo_config/store/changemode/mode/1") {
> return(pass);
> }
> if (req.url ==
> "/rest/default/V1/carts/mine/estimate-shipping-methods") {
> return(pass);
> }
> if (req.url == "/lazywishlist/") {
> return(pass);
> }
> if (req.url == "/index.php/rest/V1/") {
> return(pass);
> }
> if (req.url == "/customer/account/createpassword/") {
> return(pass);
> }
> if (req.url == "/customer/account/resetpasswordpost/") {
> return(pass);
> }
> if (req.url == "/roobeo_shipping/zipcode/validate/") {
> return(pass);
> }
> if (req.url == "/roobeo_shipping/zipcode/save/") {
> return(pass);
> }
> if (req.url == "/roobeo_shipping") {
> return(pass);
> }
> }
>
> sub vcl_init {
> new bar = directors.round_robin();
> bar.add_backend(server1a);
> bar.add_backend(server1b);
> bar.add_backend(server1c);
> }
>
> Nginx config :
>
> location / {
> proxy_pass http://VARNISH_IP:80;
> proxy_set_header Host $http_host;
> proxy_set_header X-Forwarded-Host $http_host;
> proxy_set_header X-Real-IP $remote_addr;
> proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
> proxy_set_header Ssl-Offloaded "1";
> proxy_set_header X-Forwarded-Proto https;
> proxy_set_header X-Forwarded-Port 443;
> #proxy_hide_header X-Varnish;
> #proxy_hide_header Via;
> proxy_set_header X-Forwarded-Proto $scheme;
> try_files $uri $uri/ /index.php$is_args$args;
> }
>
> Any ideas. Thank you. :-)
>
Re: Varnish : Varnish not loading CSS and JS. [ In reply to ]
Hi,

So the only problem you are describing is related to pub/, correct? But
when I don't use varnish, then these files are loading properly... they
are found and loaded. The pub/static and the path is the one used by
magento, not by Varnish. Without varnish also the path remains same, and
I get the CSS and JS. What changes would you recommend? Thank you. :-)

On 09/10/19 4:06 AM, Danila Vershinin wrote:
> Hi,
>
> I don't think it's related to Varnish.
>
> 1. You should not be using pub/ in your URLs. The secure Magento 2
> setup assumes that pub/ directory is your web root, so you should end
> up with URLs without it.
> 2. Your CSS/JS is not loaded because they are returning 404s (thus
> text/html MIME type, and browser refuses to load them because they are
> not scripts/styles, they are HTML error message)
>
> On Tue, Oct 8, 2019 at 4:17 PM, Akshay Sulakhe <kernelfreak@gmail.com>
> wrote:
>>
>> Hello friends,
>>
>> I am running magento 2.2.6 on a nginx server. I have Varnish
>> installed on another dedicated server. When I use it via proxy-pass
>> and contact varnish server first, I am able to load the magento
>> website, but CSS and JS are not loading due to strict mime-type issue.
>>
>> Error log :
>>
>> |pub/static/version123456/frontend/company/default/de_DE/css/styles-1.min.css
>> was blocked due to MIME type ("text/html")mismatch
>> (X-Content-Type-Options:nosniff) |
>>
>> We don't have no-sniff added in our Nginx configuration.
>>
>> Varnish config :
>>
>> default.vcl
>>
>> |backend server1c {.host ="IP1";.port ="80";.probe ={.url
>> ="/balancer.html";.timeout =500s;.interval =5s;.window =5;.threshold
>> =3;}}backend server1b {.host ="IP2";.port ="80";.probe ={.url
>> ="/balancer.html";.timeout =500s;.interval =5s;.window =5;.threshold
>> =3;}}backend server1a {.host ="IP3";.port ="80";.probe ={.url
>> ="/pub/balancer.html";.timeout =500s;.interval =5s;.window
>> =5;.threshold =3;}}subvcl_recv {# Happens before we check if we have
>> this in cache already.## Typically you clean up the request here,
>> removing cookies you don't need,# rewriting the request,
>> etc.if(req.url =="/lazyload/prices/load/"){return(pass);}if(req.url
>> =="/roobeo_config/store/changemode/mode/0"){return(pass);}if(req.url
>> =="/roobeo_config/store/changemode/mode/1"){return(pass);}if(req.url
>> =="/rest/default/V1/carts/mine/estimate-shipping-methods"){return(pass);}if(req.url
>> =="/lazywishlist/"){return(pass);}if(req.url
>> =="/index.php/rest/V1/"){return(pass);}if(req.url
>> =="/customer/account/createpassword/"){return(pass);}if(req.url
>> =="/customer/account/resetpasswordpost/"){return(pass);}if(req.url
>> =="/roobeo_shipping/zipcode/validate/"){return(pass);}if(req.url
>> =="/roobeo_shipping/zipcode/save/"){return(pass);}if(req.url
>> =="/roobeo_shipping"){return(pass);}}subvcl_init {newbar
>> =directors.round_robin();bar.add_backend(server1a);bar.add_backend(server1b);bar.add_backend(server1c);}|
>>
>>
>> Nginx config :
>>
>> |location /{proxy_pass http://VARNISH_IP:80;proxy_set_header
>> Host$http_host;proxy_set_header
>> X-Forwarded-Host$http_host;proxy_set_header X-Real-IP
>> $remote_addr;proxy_set_header
>> X-Forwarded-For$proxy_add_x_forwarded_for;proxy_set_header
>> Ssl-Offloaded"1";proxy_set_header
>> X-Forwarded-Protohttps;proxy_set_header
>> X-Forwarded-Port443;#proxy_hide_header X-Varnish;#proxy_hide_header
>> Via;proxy_set_header X-Forwarded-Proto$scheme;try_files $uri
>> $uri//index.php$is_args$args;} Any ideas. Thank you. :-) |
>>
>>
>> ||
Re: Varnish : Varnish not loading CSS and JS. [ In reply to ]
I'm only saying you have way far from the correct configuration, and
anything may happen :)

Like try_files $uri $uri/ /index.php$is_args$args; alongside proxy_pass. I
cannot see how this can work together, or the purpose of it.

Best regards,
Danila


On Wed, Oct 9, 2019 at 9:48 AM Akshay Sulakhe <kernelfreak@gmail.com> wrote:

> Hi,
>
> So the only problem you are describing is related to pub/, correct? But
> when I don't use varnish, then these files are loading properly... they are
> found and loaded. The pub/static and the path is the one used by magento,
> not by Varnish. Without varnish also the path remains same, and I get the
> CSS and JS. What changes would you recommend? Thank you. :-)
> On 09/10/19 4:06 AM, Danila Vershinin wrote:
>
> Hi,
>
> I don't think it's related to Varnish.
>
> 1. You should not be using pub/ in your URLs. The secure Magento 2 setup
> assumes that pub/ directory is your web root, so you should end up with
> URLs without it.
> 2. Your CSS/JS is not loaded because they are returning 404s (thus
> text/html MIME type, and browser refuses to load them because they are not
> scripts/styles, they are HTML error message)
>
> On Tue, Oct 8, 2019 at 4:17 PM, Akshay Sulakhe <kernelfreak@gmail.com>
> <kernelfreak@gmail.com> wrote:
>
> Hello friends,
>
> I am running magento 2.2.6 on a nginx server. I have Varnish installed on
> another dedicated server. When I use it via proxy-pass and contact varnish
> server first, I am able to load the magento website, but CSS and JS are not
> loading due to strict mime-type issue.
>
> Error log :
>
> pub/static/version123456/frontend/company/default/de_DE/css/styles-1.min.css was blocked due to MIME type ("text/html") mismatch (X-Content-Type-Options: nosniff)
>
>
> We don't have no-sniff added in our Nginx configuration.
>
> Varnish config :
>
> default.vcl
>
> backend server1c {
> .host = "IP1";
> .port = "80";
> .probe = {
> .url = "/balancer.html";
> .timeout = 500s;
> .interval = 5s;
> .window = 5;
> .threshold = 3;
> }}
>
> backend server1b {
> .host = "IP2";
> .port = "80";
> .probe = {
> .url = "/balancer.html";
> .timeout = 500s;
> .interval = 5s;
> .window = 5;
> .threshold = 3;
> }}
>
>
> backend server1a {
> .host = "IP3";
> .port = "80";
> .probe = {
> .url = "/pub/balancer.html";
> .timeout = 500s;
> .interval = 5s;
> .window = 5;
> .threshold = 3;
> }}
> sub vcl_recv {
> # Happens before we check if we have this in cache already.
> #
> # Typically you clean up the request here, removing cookies you don't need,
> # rewriting the request, etc.
> if (req.url == "/lazyload/prices/load/") {
> return(pass);
> }
> if (req.url == "/roobeo_config/store/changemode/mode/0") {
> return(pass);
> }
> if (req.url == "/roobeo_config/store/changemode/mode/1") {
> return(pass);
> }
> if (req.url == "/rest/default/V1/carts/mine/estimate-shipping-methods") {
> return(pass);
> }
> if (req.url == "/lazywishlist/") {
> return(pass);
> }
> if (req.url == "/index.php/rest/V1/") {
> return(pass);
> }
> if (req.url == "/customer/account/createpassword/") {
> return(pass);
> }
> if (req.url == "/customer/account/resetpasswordpost/") {
> return(pass);
> }
> if (req.url == "/roobeo_shipping/zipcode/validate/") {
> return(pass);
> }
> if (req.url == "/roobeo_shipping/zipcode/save/") {
> return(pass);
> }
> if (req.url == "/roobeo_shipping") {
> return(pass);
> }}
> sub vcl_init {
> new bar = directors.round_robin();
> bar.add_backend(server1a);
> bar.add_backend(server1b);
> bar.add_backend(server1c);}
>
>
> Nginx config :
>
> location / {
> proxy_pass http://VARNISH_IP:80;
> proxy_set_header Host $http_host;
> proxy_set_header X-Forwarded-Host $http_host;
> proxy_set_header X-Real-IP $remote_addr;
> proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
> proxy_set_header Ssl-Offloaded "1";
> proxy_set_header X-Forwarded-Proto https;
> proxy_set_header X-Forwarded-Port 443;
> #proxy_hide_header X-Varnish;
> #proxy_hide_header Via;
> proxy_set_header X-Forwarded-Proto $scheme;
> try_files $uri $uri/ /index.php$is_args$args;
> }
>
> Any ideas. Thank you. :-)
>
>
>
Re: Varnish : Varnish not loading CSS and JS. [ In reply to ]
Hi Akshay,

Please find the CSS link and try to load the CSS link in a browser window
and check the varnish and nginx logs.

It seems like CSS links throwing 404.

On Wed, Oct 9, 2019 at 12:19 PM Akshay Sulakhe <kernelfreak@gmail.com>
wrote:

> Hi,
>
> So the only problem you are describing is related to pub/, correct? But
> when I don't use varnish, then these files are loading properly... they are
> found and loaded. The pub/static and the path is the one used by magento,
> not by Varnish. Without varnish also the path remains same, and I get the
> CSS and JS. What changes would you recommend? Thank you. :-)
> On 09/10/19 4:06 AM, Danila Vershinin wrote:
>
> Hi,
>
> I don't think it's related to Varnish.
>
> 1. You should not be using pub/ in your URLs. The secure Magento 2 setup
> assumes that pub/ directory is your web root, so you should end up with
> URLs without it.
> 2. Your CSS/JS is not loaded because they are returning 404s (thus
> text/html MIME type, and browser refuses to load them because they are not
> scripts/styles, they are HTML error message)
>
> On Tue, Oct 8, 2019 at 4:17 PM, Akshay Sulakhe <kernelfreak@gmail.com>
> <kernelfreak@gmail.com> wrote:
>
> Hello friends,
>
> I am running magento 2.2.6 on a nginx server. I have Varnish installed on
> another dedicated server. When I use it via proxy-pass and contact varnish
> server first, I am able to load the magento website, but CSS and JS are not
> loading due to strict mime-type issue.
>
> Error log :
>
> pub/static/version123456/frontend/company/default/de_DE/css/styles-1.min.css was blocked due to MIME type ("text/html") mismatch (X-Content-Type-Options: nosniff)
>
>
> We don't have no-sniff added in our Nginx configuration.
>
> Varnish config :
>
> default.vcl
>
> backend server1c {
> .host = "IP1";
> .port = "80";
> .probe = {
> .url = "/balancer.html";
> .timeout = 500s;
> .interval = 5s;
> .window = 5;
> .threshold = 3;
> }}
>
> backend server1b {
> .host = "IP2";
> .port = "80";
> .probe = {
> .url = "/balancer.html";
> .timeout = 500s;
> .interval = 5s;
> .window = 5;
> .threshold = 3;
> }}
>
>
> backend server1a {
> .host = "IP3";
> .port = "80";
> .probe = {
> .url = "/pub/balancer.html";
> .timeout = 500s;
> .interval = 5s;
> .window = 5;
> .threshold = 3;
> }}
> sub vcl_recv {
> # Happens before we check if we have this in cache already.
> #
> # Typically you clean up the request here, removing cookies you don't need,
> # rewriting the request, etc.
> if (req.url == "/lazyload/prices/load/") {
> return(pass);
> }
> if (req.url == "/roobeo_config/store/changemode/mode/0") {
> return(pass);
> }
> if (req.url == "/roobeo_config/store/changemode/mode/1") {
> return(pass);
> }
> if (req.url == "/rest/default/V1/carts/mine/estimate-shipping-methods") {
> return(pass);
> }
> if (req.url == "/lazywishlist/") {
> return(pass);
> }
> if (req.url == "/index.php/rest/V1/") {
> return(pass);
> }
> if (req.url == "/customer/account/createpassword/") {
> return(pass);
> }
> if (req.url == "/customer/account/resetpasswordpost/") {
> return(pass);
> }
> if (req.url == "/roobeo_shipping/zipcode/validate/") {
> return(pass);
> }
> if (req.url == "/roobeo_shipping/zipcode/save/") {
> return(pass);
> }
> if (req.url == "/roobeo_shipping") {
> return(pass);
> }}
> sub vcl_init {
> new bar = directors.round_robin();
> bar.add_backend(server1a);
> bar.add_backend(server1b);
> bar.add_backend(server1c);}
>
>
> Nginx config :
>
> location / {
> proxy_pass http://VARNISH_IP:80;
> proxy_set_header Host $http_host;
> proxy_set_header X-Forwarded-Host $http_host;
> proxy_set_header X-Real-IP $remote_addr;
> proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
> proxy_set_header Ssl-Offloaded "1";
> proxy_set_header X-Forwarded-Proto https;
> proxy_set_header X-Forwarded-Port 443;
> #proxy_hide_header X-Varnish;
> #proxy_hide_header Via;
> proxy_set_header X-Forwarded-Proto $scheme;
> try_files $uri $uri/ /index.php$is_args$args;
> }
>
> Any ideas. Thank you. :-)
>
>
> _______________________________________________
> varnish-misc mailing list
> varnish-misc@varnish-cache.org
> https://www.varnish-cache.org/lists/mailman/listinfo/varnish-misc
>


--
Thanks & Regards

* Shafeeque Aslam A.S*
* +91-9633-506-503 **https://teq.kefh.in <https://teq.kefh.in>*
https://www.linkedin.com/in/shafeequeaslam