Reputation: 1
I have 2 web site running on 2 different servers (but located on the same file system). I use some common resources like css files, fonts, images, xml files ... I want the second site using resources of the first site; i.e I store the common resources on server1 and want the common files to be available (not duplicated) from web pages of server2 Idealy html files should look like
On Server1, index.html file contains a <link rel="stylesheet" type="text/css" href="MyStyle.css"/>
in the html head.
The MyStyle.css contains a font use
@font-face{font-family:"MyFont";font-style:normal;font-weight:900;font-display:auto; src:url(/MyFont.woff2) format("woff2");}
On Server2, index.html file contains a <link rel="stylesheet" type="text/css" href="MyStyle.css"/>
in the html head.
The MyStyle.css contains a font use
@font-face{font-family:"MyFont";font-style:normal;font-weight:900;font-display:auto; src:url(MyFont.woff2) format("woff2");}
I tried several ways (.htaccess , uses of urls in html head and css ) but when browsing index.html located on server2, impossible to get the MyFont.woff2 file .
.htaccess content on server2:
# Server2
# at Server root, so DocumentRoot
Options -Indexes
Options +FollowSymlinks
RewriteEngine On
#--------------------------------------------------
# css files are located on server1
RewriteRule "^(.*)\.css$" http://server1/$1\.css" [L]
# woff2 font files are located on server1
RewriteRule "^(.*)\.woff2$" http://server1/$1\.woff2" [L]
Result : The browser (I'm using Chrome) gets the html file from server2, the css file from server1 with a redirection (so using 2 requests) , but don't get the font file from server1.
The brower indicates the error :
Access to font at 'http://server1/MyFont.woff2' from origin 'http://server2' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. MyStyle.css:1 GET http://server2/MyFont.woff2 net::ERR_FAILED 200
=> In the MyStyle.css, the font url is a relative path like src:url**(MyFont.woff2**) format("woff2");
, the browser try to get it on server1 rather than server2; This is due to the notified css redirection where the browser uses MyStyle.css redirected location as base for the font.
@font-face{font-family:"MyFont";font-style:normal;font-weight:900;font-display:auto; src:url(http://server1/MyFont.woff2) format("woff2");}
Result : The browser gets the html file from server2, the css file from server1 with a redirection (so using 2 requests) , but don't get the font file from server1.
I get exactly same error; same consequence strict-origin-when-cross-origin ... The browser accept to get the MyStyle.css file from server1 but not the MyFont.woff2 font file defined within the css on same server than the MyStyle.css.
In the server2 index.html file, the link to the css file as
<link ... href="http://server1/MyStyle.css"/>
and in the css file
@font-face{font-family:"MyFont";... src:url(http://server1/MyFont.woff2) format("woff2");}
.
Result : The browser gets the html file from server2, the css file directly from server1 (without any redirection) , but still don't get the font file from server1.
I get exactly same error as before Access to font at 'http://server1/MyFont.woff2' from origin 'http://server2' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. MyStyle.css:1 GET http://server2/MyFont.woff2 net::ERR_FAILED 200
The Chrome browser sounds considering MyFont.woff2 as not same origin than the MyStyle.css, even if, now, explicitely MyStyle.css file is from a different orign than the index.html and MyFont.woff2 is same origin than MyStyle.css; thus because MyFont.woff2 is not same orign than index.html ...
Any idea on how I can get index.html from server2 and css + fonts from server1 where font files are defined within the css?
Note : I didn't found a way in the .htaccess file to reroute css and font files without explicit redirection. As my 2 servers are on the same file system I would have expected a rewriting rule doing something like server2/../server1/MyStyle.css. This imply to set path going to the ancestor folder of the DocumentRoot
Note2 : I do not have access to the Apache server configuration file (httpd.conf) nor the virtual host configuration file (httpd-vhosts.conf).
Note3 : I only have a FTP access to the servers file system.
Upvotes: 0
Views: 331