CORS & CDN

[potrusil]

Hello,

I have set up WordPress on Linux App Service, installed a theme, and now I cannot load fonts that the theme uses because of CORS. I see the following errors in the network console of my browser:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxx-endpoint.azureedge.net/wp-content/themes/soledad/fonts/penciicon.ttf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

I see that the font is loaded through the CDN that was set up by the App Service installer. However, I have no idea what to do next. Your description of how to configure CDN with WordPress doesn't have any more details.

Thanks!

[rabollin]

@potrusil - Can you please raise a support ticket here: https://azure.microsoft.com/en-us/support/create-ticket to get needed assistance for you.

[potrusil]

Hi @rabollin, I do not have a paid support plan to raise a ticket. However, here I wanted to point out that something is not working properly when following the steps described in Configuring Azure CDN with WordPress. When I was digging deeper I found out that the W3TC plugin creates an Nginx configuration which should fix the CORS issues:

# BEGIN W3TC CDN
location ~ \.(ttf|ttc|otf|eot|woff|woff2|font.css)$ {
    expires 31536000s;
    etag on;
    if_modified_since exact;
    add_header Pragma "public";
    add_header Cache-Control "public";
    add_header Referrer-Policy "no-referrer-when-downgrade";
    add_header Access-Control-Allow-Origin "*";
}
# END W3TC CDN

The problem is that this configuration is in /home/site/wwwroot/nginx.conf which is ignored by Nginx.

[potrusil]

I was wrong. The configuration file /home/site/wwwroot/nginx.conf is in fact loaded by Nginx. And actually, when I tried to load the site today everything worked properly in all browsers. I have no idea what has changed. But I guess there is no need to update documentation.

[JoshuaO]

I have the exact same issue. As shown below, the fonts of the theme is not loaded normally due to the CORS issue.

Access to font at 'https://xxxx-endpoint.azureedge.net/blobbuilttoworf7d6a133fb/wp-content/themes/prague/assets/fonts/fontawesome-webfont.woff2?v=4.7.0' from origin 'https://xxxx.azurewebsites.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.