SVG files not working after switching website hosting to my NAS - .htaccess

I'm now hosting my website off my personal NAS drive and everything seems to be working except the SVGs.
I tried adding the .htaccess file with:
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
but they still do not work. When I go to the URL of the file it just shows an error as if the file does not exist.
Any ideas?
Thanks in advance!

Related

Why is gzip not working on pub/static folder?

I am currently running Magento 2.1.14 and have enable gzip per the Magento documentation as well as the other well visited posts on this site. I have also doubled checked with my hosting provider that Mod_deflate is enabled on the server side.
In addition, I have a copy of my site on my local machine with same htaccess files as what resides on our live server.
On my local machine, simply enabling the apache module and then adding the htaccess code in the main htaccess file of the public_html directory works. All requests on my local site show headers that contain “Content Encoding: gzip”.
However, when live using https on our server, the gzip encoding seems to stop at the pub directory. NO content coming from the pub directory (pub/static and pub/media) shows and gzip encoding. The files on my local machine and live server are the same. According to my hosting provider, gzipped is enabled on their side and they believe that is has to do with one of the htaccess files in my file tree that is stopping the gzip encoding from happening.
I did a small test recommended by our hosting provider as well, and tried to set up an extra directory in the public_html directory on both my local machine and the live server to test if the gzip encoding would work. On my local machine, I can visit the directory and the file in it shows gzip compression, but on my live server, when adding the file to my public_html directory and attempting to visit it through the browser, Magento throws a 404 error!
Does anyone out there have any idea why gzip would not waterfall through my file tree and properly gzip the js, minified js, css and minified css files that are located in the pub folder?
After days of debugging it turns out that on my live server, the RequestHeader for Set-Encoding was being stripped. This was not happening on my Apache setup on my local machine. My web host still has not give me an explanation why this was happening, nor do I know if it has to do with the htaccess file in the pub/static directory, but adding the RequestHeader set below:
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=edge"
Header set Connection keep-alive
#THE LINE BELOW THIS COMMENT
RequestHeader set Accept-Encoding "gzip, deflate, br"
<FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
Header unset X-UA-Compatible
</FilesMatch>
to the htaccess file in the root of my magento site fixed the issue with the compression.
If this is a server issue, I would like someone to comment below on what I might bring up with my webhost to address this. Otherwise, I'm going to submit an issue to the Magento github.
Very strange issue,
deflate mode included in .htaccess of pub/static
bat not for all file types,
javascript files not added to setting
so,
just edit pub/static/.htaccess
and edit row with start - AddOutputFilterByType DEFLATE
and add content type -
text/javascript application/javascript application/x-javascript application/json image/svg+xml
now, all static content will with gzip.
Strange, why was missed this,
maybe for other features ?

Issue with playing some .mp4 on Google Chrome

I have downloaded some .mp4 files from shutterstock to use them in my website project.
Everything works perfect on localhost, i can play the movies like localhost/example.mp4 on every browser. I uploaded the files on my server, but now, it won`t play with Google Chrome (myserver.com/example.mp4), but will play with other browsers. This is very strange.
Anyone have any explanation ?
I checked the mime types in my cPanel account and all are ok, also i added the next code into htaccess but still doesn`t work.
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/mp4 .mov
AddType video/webm .webm
and
<FilesMatch mp4>
Satisfy any
order allow,deny
allow from all
</FilesMatch>
What should be the issue? Is a file issue or an issue from the server? Cues from localhost it will open in Google Chrome.

Resource interpreted as image but transferred with MIME type text/xml in xampp?

I have a project without a .htaccess(I already found solutions when you have a .htaccess in your project) and it is not displaying my .svg. Normal images are displayed correctly. The error message is as follows:
Resource interpreted as image but transferred with MIME type text/xml.
I am using xampp on osx yosemite version 10.10.1. Can I add
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
somewhere in my xampp?
Thanks in advance!
Edit: I reinstalled xampp and that solved the problem. I will leave this open, in case people step over this problem again and one of the answers might be the right one.
It appears that you can add the appropriate mime type definitions to the following location depending on your OS:
xampp\apache\conf\mime.types or /etc/httpd/conf/mime.types
Note that the config file you're looking for is called mime.types
The definition you'd want to add would be something like:
image/svg+xml svg svgz
More info:
1. Thread on the topic
2. Blog post on the topic

Excel xlsx files downloading as zip file

The following is happening in IE8. The server is Apache2 on Ubuntu.
I'm trying to get an excel file to download via a link. When I click the link the file shows with a .zip extension.
I've set the mime-types in a .htaccess file and also can see they are in the /etc/mime.type file.
The .htaccess file as follows:
AddType application/vnd.ms-word.document.macroEnabled.12 .docm
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.document docx
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.template dotx
AddType application/vnd.ms-powerpoint.template.macroEnabled.12 potm
AddType application/vnd.openxmlformats-officedocument.presentationml.template potx
AddType application/vnd.ms-powerpoint.addin.macroEnabled.12 ppam
AddType application/vnd.ms-powerpoint.slideshow.macroEnabled.12 ppsm
AddType application/vnd.openxmlformats-officedocument.presentationml.slideshow ppsx
AddType application/vnd.ms-powerpoint.presentation.macroEnabled.12 pptm
AddType application/vnd.openxmlformats-officedocument.presentationml.presentation pptx
AddType application/vnd.ms-excel.addin.macroEnabled.12 xlam
AddType application/vnd.ms-excel.sheet.binary.macroEnabled.12 xlsb
AddType application/vnd.ms-excel.sheet.macroEnabled.12 xlsm
AddType application/vnd.openxmlformats-officedocument.spreadsheetml.sheet xlsx
AddType application/vnd.ms-excel.template.macroEnabled.12 xltm
AddType application/vnd.openxmlformats-officedocument.spreadsheetml.template xltx
I've looked a loads of forums some say the leading dot for .docm on the the first line should be added other say not. The Apache documentation say it can include on not include the leading dot. I've tried with both.
I've copied the code to a text editor to make sure there are no hidden characters and pasted it back.
I've cleared the browser cache after each change and restarted Apache. Nothing seems to work.
This did work on our old server so I'm convinced the problem is server configuration.
Any help would be appreciated.

Mime type for WOFF fonts?

What mime type should WOFF fonts be served as?
I am serving truetype (ttf) fonts as font/truetype and opentype (otf) as font/opentype, but I cannot find the correct format for WOFF fonts.
I have tried font/woff, font/webopen, and font/webopentype, but Chrome still complains:
"Resource interpreted as font but transferred with MIME type application/octet-stream."
Anybody know?
Update from Keith Shaw's comment on Jun 22, 2017:
As of February 2017, RFC8081 is the proposed standard. It defines a top-level media type for fonts, therefore the standard media type for WOFF and WOFF2 are as follows:
font/woff
font/woff2
In January 2011 it was announced that in the meantime Chromium will recognize
application/x-font-woff
as the mime-type for WOFF. I know this change is now in Chrome beta and if not in stable yet, it shouldn't be too far away.
For me, the next has beeen working in an .htaccess file.
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2
It will be application/font-woff.
see http://www.w3.org/TR/WOFF/#appendix-b (W3C Candidate Recommendation 04 August 2011)
and http://www.w3.org/2002/06/registering-mediatype.html
From Mozilla css font-face notes
In Gecko, web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.
Note: Because there are no defined MIME types for TrueType, OpenType, and WOFF fonts, the MIME type of the file specified is not considered.
source: https://developer.mozilla.org/en/CSS/#font-face#Notes
Reference for adding font mime types to .NET/IIS
via web.config
<system.webServer>
<staticContent>
<!-- remove first in case they are defined in IIS already, which would cause a runtime error -->
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff" mimeType="font/woff" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
</staticContent>
</system.webServer>
via IIS Manager
NGINX SOLUTION
file
/etc/nginx/mime.types
or
/usr/local/nginx/conf/mime.types
add
font/ttf ttf;
font/opentype otf;
font/woff woff;
font/woff2 woff2;
application/vnd.ms-fontobject eot;
remove
application/octet-stream eot;
REFERENCES
RFC #02.2017
https://www.rfc-editor.org/rfc/rfc8081#page-15
https://www.iana.org/assignments/media-types/media-types.xhtml
Thanks to Mike Fulcher
http://drawingablank.me/blog/font-mime-types-in-nginx.html
As of February 2017, RFC8081 is the proposed standard. It defines a top-level media type for fonts, therefore the standard media type for WOFF and WOFF2 are as follows:
font/woff
font/woff2
Note: This answer was correct at it's time but became outdated in 2017 when RFC 8081 was released
There is no font MIME type! Thus, font/xxx is ALWAYS wrong.
Add the following to your .htaccess
AddType font/woff woff
good luck
Thing that did it for me was to add this to my mime_types.rb initializer:
Rack::Mime::MIME_TYPES['.woff'] = 'font/woff'
and wipe out the cache
rake tmp:cache:clear
before restarting the server.
Source: https://github.com/sstephenson/sprockets/issues/366#issuecomment-9085509
#Nico,
Currently there is no defined standard for the woff font mime type. I use a font delivery cdn service and it uses font/woff and I get the same warning in chrome.
Reference: The Internet Assigned Numbers Authority
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
This is a helpful list of mimetypes
I know this post is kind of old but after spending many hours on trying to make the fonts work on my nginx local machine and trying a tons of solutions i finally got the one that worked for me like a charm.
location ~* \.(eot|otf|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
}
Inside the parenthesis you can put the extensions of your fonts or generally the files that you want to load. For example i used it for fonts and for images(png,jpg etc etc) as well so don't get confused that this solution applies only for fonts.
Just put it into your nginx config file, restart and i hope it works also for you!
Maybe this will help someone. I saw that on IIS 7 .ttf is already a known mime-type. It's configured as:
application/octet-stream
So I just added that for all the CSS font types (.oet, .svg, .ttf, .woff) and IIS started serving them. Chrome dev tools also do not complain about re-interpreting the type.
Cheers,
Michael
For all Solution index.php remove form url and woff file allowed. for write below code in .htaccess file and and make this alternation to your application/config/config.php file:
$config['index_page'] = '';
For only Linux hosting server.
.htaccess file details
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
#Removes access to the system folder by users.
#Additionally this will allow you to create a System.php controller,
#previously this would not have been possible.
#'system' can be replaced if you have renamed your system folder.
RewriteCond %{REQUEST_URI} ^system.*
RewriteRule ^(.*)$ /index.php?/$1 [L]
#When your application folder isn't in the system folder
#This snippet prevents user access to the application folder
#Submitted by: Fabdrol
#Rename 'application' to your applications folder name.
RewriteCond %{REQUEST_URI} ^application.*
RewriteRule ^(.*)$ /index.php?/$1 [L]
#Checks to see if the user is attempting to access a valid file,
#such as an image or css document, if this isn't true it sends the
#request to index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>
<IfModule !mod_rewrite.c>
# If we don't have mod_rewrite installed, all 404's
# can be sent to index.php, and everything works as normal.
# Submitted by: ElliotHaughin
ErrorDocument 404 /index.php
</IfModule>
IIS automatically defined .ttf as application/octet-stream which seems to work fine and fontshop recommends .woff to be defined as application/octet-stream
WOFF:
Web Open Font Format
It can be compiled with either TrueType or PostScript (CFF) outlines
It is currently supported by FireFox 3.6+
Try to add that:
AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf
Mime type might not be your only problem. If the font file is hosted on S3 or other domain, you may additionally have the issue that Firefox will not load fonts from different domains. It's an easy fix with Apache, but in Nginx, I've read that you may need to encode your font files in base-64 and embed them directly in your font css file.

Resources