Cloudfront CDN Access to font has been blocked by CORS policy

  • Resolved nickwrg

    (@nickwrg)


    4 years, 8 months ago

    Hello,

    I recently configured W3 Total Cache to use AWS S3 and Clouudfront for CDN.

    Everything is working fine except for theme fonts it seems. I can see the following errors in the console:

    Access to font at 'https://d2qjn9qu0qahjw.cloudfront.net/wp-content/themes/Steakhouse/fonts/steakhouse-pixellove/steakhouse-pixellove.woff' from origin 'https://steambowlkc.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    • CDN Settings is to pull.
    • I’ve checked the .htaccess file and it does not have a block for the fonts. I cannot add it though due to the permissions of the bitnami image being used.
    • Tried adding to the .htaccess.conffile as recommended by bitnami, no luck
    • I’ve checked and it’s apache only, no nginx.
    • I’ve tried deleting the .htaccess file and having the plugin regenerate, still didn’t generate the fonts

    Here is my CORS configuration for the S3 bucket.

    `
    <?xml version=”1.0″ encoding=”UTF-8″?>
    <CORSConfiguration xmlns=”https://s3.amazonaws.com/doc/2006-03-01/”&gt;
    <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    </CORSConfiguration>
    `

    I’m about out of ideas at this point.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @nickwrg

    I am sorry about the issue you are experiencing and I am happy to assist you with this.
    I am not seeing the mentioned error for that file but for the different file:
    Access to font at 'https://d2qjn9qu0qahjw.cloudfront.net/wp-content/themes/Steakhouse/fonts/font-awesome/fontawesome-webfont.woff2?v=4.6.3' from origin 'https://steambowlkc.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    This being said the console also suggests that the file https://d2qjn9qu0qahjw.cloudfront.net/wp-content/themes/Steakhouse/fonts/font-awesome/fontawesome-webfont.woff2?v=4.6.3 is not being loaded so you should doublecheck if the file exists on the CDN and possibly purge that file in Performance>CDN and click on the purge button.
    Thank you!

    Thread Starter nickwrg

    (@nickwrg)

    Hi Marko,

    Thanks for the reply I purged that file from the CDN but it still doesn’t seem to work. Also depending on the browser I see different errors. Chrome still has the errors mentioned but Firefox only shows the one you mentioned.

    I see these lines in my .htaccess file, I’m not sure exactly what they mean though:

    ExpiresByType application/x-font-ttf A31536000
    ExpiresByType application/vnd.ms-opentype A31536000
    ExpiresByType audio/wav A31536000
    ExpiresByType audio/wma A31536000
    ExpiresByType application/vnd.ms-write A31536000
    ExpiresByType application/font-woff A31536000
    ExpiresByType application/font-woff2 A31536000
    ExpiresByType application/vnd.ms-excel A31536000
    ExpiresByType application/zip A31536000

    I’ve tried adding everything to my htaccess.conf file but the plugin still adds it to the default .htaccess file, not sure if there’s a danger of duplication doing it that way.

    Is there a place I can view the documentation to learn more about the finer details of W3 Total Cache? I didn’t see it on BoldGrid’s site.

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @nickwrg

    Thank you for the information.
    Can you please add the following to the top of your .htaccess and possibly to htaccess.conf:

    <FilesMatch ".(eot|otf|ttf|woff|woff2)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

    Thank you!

    Thread Starter nickwrg

    (@nickwrg)

    Hi Marko,

    I have updated the htaccess.conf, below is it in it’s entirety. I am not able to update .htaccess at all.

    <Directory "/opt/bitnami/apps/wordpress/htdocs/wp-content/plugins/akismet">
# Only allow direct access to specific Web-available files.

# Apache 2.2
<IfModule !mod_authz_core.c>
	Order Deny,Allow
	Deny from all
</IfModule>

# Apache 2.4
<IfModule mod_authz_core.c>
	Require all denied
</IfModule>

# Akismet CSS and JS
<FilesMatch "^(form\.js|akismet\.js|akismet\.css)$">
	<IfModule !mod_authz_core.c>
		Allow from all
	</IfModule>
	
	<IfModule mod_authz_core.c>
		Require all granted
	</IfModule>
</FilesMatch>

# Akismet images
<FilesMatch "^logo-full-2x\.png$">
	<IfModule !mod_authz_core.c>
		Allow from all
	</IfModule>
	
	<IfModule mod_authz_core.c>
		Require all granted
	</IfModule>
</FilesMatch>
</Directory>
# BEGIN W3TC Browser Cache
<Directory "/opt/bitnami/apps/wordpress/htdocs">
<IfModule mod_mime.c>
    AddType text/css .css
    AddType text/x-component .htc
    AddType application/x-javascript .js
    AddType application/javascript .js2
    AddType text/javascript .js3
    AddType text/x-js .js4
    AddType video/asf .asf .asx .wax .wmv .wmx
    AddType video/avi .avi
    AddType image/bmp .bmp
    AddType application/java .class
    AddType video/divx .divx
    AddType application/msword .doc .docx
    AddType application/vnd.ms-fontobject .eot
    AddType application/x-msdownload .exe
    AddType image/gif .gif
    AddType application/x-gzip .gz .gzip
    AddType image/x-icon .ico
    AddType image/jpeg .jpg .jpeg .jpe
    AddType image/webp .webp
    AddType application/json .json
    AddType application/vnd.ms-access .mdb
    AddType audio/midi .mid .midi
    AddType video/quicktime .mov .qt
    AddType audio/mpeg .mp3 .m4a
    AddType video/mp4 .mp4 .m4v
    AddType video/mpeg .mpeg .mpg .mpe
    AddType video/webm .webm
    AddType application/vnd.ms-project .mpp
    AddType application/x-font-otf .otf
    AddType application/vnd.ms-opentype ._otf
    AddType application/vnd.oasis.opendocument.database .odb
    AddType application/vnd.oasis.opendocument.chart .odc
    AddType application/vnd.oasis.opendocument.formula .odf
    AddType application/vnd.oasis.opendocument.graphics .odg
    AddType application/vnd.oasis.opendocument.presentation .odp
    AddType application/vnd.oasis.opendocument.spreadsheet .ods
    AddType application/vnd.oasis.opendocument.text .odt
    AddType audio/ogg .ogg
    AddType application/pdf .pdf
    AddType image/png .png
    AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
    AddType audio/x-realaudio .ra .ram
    AddType image/svg+xml .svg .svgz
    AddType application/x-shockwave-flash .swf
    AddType application/x-tar .tar
    AddType image/tiff .tif .tiff
    AddType application/x-font-ttf .ttf .ttc
    AddType application/vnd.ms-opentype ._ttf
    AddType audio/wav .wav
    AddType audio/wma .wma
    AddType application/vnd.ms-write .wri
    AddType application/font-woff .woff
    AddType application/font-woff2 .woff2
    AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
    AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A31536000
    ExpiresByType text/x-component A31536000
    ExpiresByType application/x-javascript A31536000
    ExpiresByType application/javascript A31536000
    ExpiresByType text/javascript A31536000
    ExpiresByType text/x-js A31536000
    ExpiresByType video/asf A31536000
    ExpiresByType video/avi A31536000
    ExpiresByType image/bmp A31536000
    ExpiresByType application/java A31536000
    ExpiresByType video/divx A31536000
    ExpiresByType application/msword A31536000
    ExpiresByType application/vnd.ms-fontobject A31536000
    ExpiresByType application/x-msdownload A31536000
    ExpiresByType image/gif A31536000
    ExpiresByType application/x-gzip A31536000
    ExpiresByType image/x-icon A31536000
    ExpiresByType image/jpeg A31536000
    ExpiresByType image/webp A31536000
    ExpiresByType application/json A31536000
    ExpiresByType application/vnd.ms-access A31536000
    ExpiresByType audio/midi A31536000
    ExpiresByType video/quicktime A31536000
    ExpiresByType audio/mpeg A31536000
    ExpiresByType video/mp4 A31536000
    ExpiresByType video/mpeg A31536000
    ExpiresByType video/webm A31536000
    ExpiresByType application/vnd.ms-project A31536000
    ExpiresByType application/x-font-otf A31536000
    ExpiresByType application/vnd.ms-opentype A31536000
    ExpiresByType application/vnd.oasis.opendocument.database A31536000
    ExpiresByType application/vnd.oasis.opendocument.chart A31536000
    ExpiresByType application/vnd.oasis.opendocument.formula A31536000
    ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
    ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
    ExpiresByType application/vnd.oasis.opendocument.text A31536000
    ExpiresByType audio/ogg A31536000
    ExpiresByType application/pdf A31536000
    ExpiresByType image/png A31536000
    ExpiresByType application/vnd.ms-powerpoint A31536000
    ExpiresByType audio/x-realaudio A31536000
    ExpiresByType image/svg+xml A31536000
    ExpiresByType application/x-shockwave-flash A31536000
    ExpiresByType application/x-tar A31536000
    ExpiresByType image/tiff A31536000
    ExpiresByType application/x-font-ttf A31536000
    ExpiresByType application/vnd.ms-opentype A31536000
    ExpiresByType audio/wav A31536000
    ExpiresByType audio/wma A31536000
    ExpiresByType application/vnd.ms-write A31536000
    ExpiresByType application/font-woff A31536000
    ExpiresByType application/font-woff2 A31536000
    ExpiresByType application/vnd.ms-excel A31536000
    ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
        AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon application/json application/vnd.ms-access video/webm application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf application/vnd.ms-opentype audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel
    <IfModule mod_mime.c>
        # DEFLATE by extension
        AddOutputFilter DEFLATE js css htm html xml
    </IfModule>
</IfModule>
<FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$">
    FileETag MTime Size
    <IfModule mod_headers.c>
         Header unset Set-Cookie
         Header set X-Powered-By "W3 Total Cache/0.13.1"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|TXT|XSD|XSL|XML)$">
    FileETag MTime Size
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|webm|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|WEBP|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|WEBM|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|_TTF|WAV|WMA|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
    FileETag MTime Size
    <IfModule mod_headers.c>
         Header unset Set-Cookie
    </IfModule>
</FilesMatch>
<FilesMatch "\.(bmp|class|doc|docx|eot|exe|ico|json|mdb|webm|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|pot|pps|ppt|pptx|svg|svgz|swf|tif|tiff|ttf|ttc|_ttf|wav|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|BMP|CLASS|DOC|DOCX|EOT|EXE|ICO|JSON|MDB|WEBM|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|POT|PPS|PPT|PPTX|SVG|SVGZ|SWF|TIF|TIFF|TTF|TTC|_TTF|WAV|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW)$">
    <IfModule mod_headers.c>
         Header unset Last-Modified
    </IfModule>
</FilesMatch>
<FilesMatch ".(eot|otf|ttf|woff|woff2)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>
<IfModule mod_headers.c>
    Header set Referrer-Policy "no-referrer-when-downgrade"
</IfModule>
# END W3TC Browser Cache
# BEGIN W3TC CDN
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
# END W3TC CDN
# BEGIN W3TC Page Cache core
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{HTTPS} =on
    RewriteRule .* - [E=W3TC_SSL:_ssl]
    RewriteCond %{SERVER_PORT} =443
    RewriteRule .* - [E=W3TC_SSL:_ssl]
    RewriteCond %{HTTP:X-Forwarded-Proto} =https [NC]
    RewriteRule .* - [E=W3TC_SSL:_ssl]
    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteRule .* - [E=W3TC_ENC:_gzip]
    RewriteCond %{HTTP_COOKIE} w3tc_preview [NC]
    RewriteRule .* - [E=W3TC_PREVIEW:_preview]
    RewriteCond %{REQUEST_METHOD} !=POST
    RewriteCond %{QUERY_STRING} =""
    RewriteCond %{HTTP_COOKIE} !(comment_author|wp\-postpass|w3tc_logged_out|wordpress_logged_in|wptouch_switch_toggle) [NC]
    RewriteCond %{REQUEST_URI} \/$
    RewriteCond "%{DOCUMENT_ROOT}/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_SSL}%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" -f
    RewriteRule .* "/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_SSL}%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" [L]
</IfModule>
# END W3TC Page Cache core
</Directory>

    I updated this and restarted apache and unfortunately no change.

    • This reply was modified 4 years, 8 months ago by nickwrg.
    Thread Starter nickwrg

    (@nickwrg)

    Status update.

    So, after this latest change. It looks like this is really only happening in Chrome now. In other browsers I still see the error for the file:

    https://d2qjn9qu0qahjw.cloudfront.net/wp-content/themes/Steakhouse/fonts/font-awesome/fontawesome-webfont.woff2?v=4.6.3

    But the other font files seem fine. Any thoughts on this?

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @nickwrg

    I can’t seem to access your website now as it just prompts me to download.gz
    This means that there is a double compression somewhere, possibly duplicate rules in htaccess.conf.
    Can you please remove W3 Total Cache rules from htaccess.conf?
    Also when you say you are not able to update .htaccess at all, what do you mean by that exactly?
    The rule I provided needs to be on top of the .htaccess file, outside of W3 Total Cache rules and this is also the case for .htaccess.conf.
    Thank you!

    Thread Starter nickwrg

    (@nickwrg)

    I will try to put it outside of W3 Total Cache in the .htaccess.conf.

    Regarding the .htaccess file that the plugin creates or normally edits I can access it but it is not editable. Please see bitnami docs:

    https://docs.bitnami.com/oci/apps/wordpress/administration/use-htaccess/

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @nickwrg

    Any update on this? I can see that your website appears broken again
    Thank you!

    Thread Starter nickwrg

    (@nickwrg)

    Yes, it still is not working unfortunately.

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @nickwrg

    Can you clarify what is not working? The CORS issue or the issue with your broken styling. Have you tried purging minify?
    Thanks!

    Thread Starter nickwrg

    (@nickwrg)

    Hi Marko, I believe the CORS issue is causing the broken styling, it won’t load some of the font files as it says they don’t have access.

    I justed purged minify and others and it didn’t seem to help.

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @nickwrg

    This has nothing to do with the CORS but some CSS/JS files failed to load. Have you tried purging the CDN? ALso does if you disable CDN does the issue persists?
    Thank you!

    Thread Starter nickwrg

    (@nickwrg)

    Well, I have no idea why but those files seem to have loaded overnight sometime. I didn’t change anything.

    I have not disabled the CDN yet, what happens when you disable a CDN exactly? I can’t find any information on that. What happens to media you uploaded while the CDN was active now that it’s inactive? I would imagine the site wouldn’t know about it.

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @nickwrg

    If you disable CDN in W3 Total Cache the resources will not be served from the CDN but your server.
    Also, try purging the CDN and re-authorizing the credentials. It appears that possibly you have disrupted something by constantly moving the .htaccess rules.
    Are you using any other caching solution or possibly server side caching or any other form of caching?
    Thank you!

    Thread Starter nickwrg

    (@nickwrg)

    I am only using W3 Total Cache as the only caching solution. Otherwise it’s a clean ec2 instance with WordPress.

    Let me purge everything and reauthorize. I’ll let you know.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Cloudfront CDN Access to font has been blocked by CORS policy’ is closed to new replies.