Share via

CORS errors Azure Wordpress with custom domain and using Azure Blobstorage CDN

Shane H 0 Reputation points
2024-02-06T18:41:26.36+00:00

Hello everybody - I could really appreciate some help! I am rather new to the newer Azure offerings but I am attempting to stand up the Azure Wordpress service (I take it a wrapper basically around app service and what not). I opted to use the Azure blobstorage CDN with the W3 total cache plugin (I let Azure set this up - I did not do this manually).

So far it has been going decent, stood up easily, added my custom domain and then installed a custom theme.

That's when I have run into an issue - CORS errors to be specific.

On various css/font files I get errors like:
"Access to font at 'https://<removed for privacy>-endpoint.azureedge.net/blob<removed some for privacy>b5a9b/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-brands-400.ttf' from origin 'https://www.<my custom domain as added in the Wordpress app service custom domain UI in Azure portal>.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

I have tried adding my custom domain (https://www.<my custom domain>.com) to the CORS setting in the Azure UI for the App Service and for the blobstorage account it generated in the resource group when I stood it up. I also tried adding the Azure generated domain for ("<removed for privacy>.azurewebsites.net") but no luck there either. These were all done with max age 0, Allowed headers = *, Exposed headers = *, Allowed methods = get/post/options (as clicked in UI) and tested in a Chrome private tab (no cache).

I don't mind configuring this but it seems like something the service should have done automatically when providing the custom domain in my opinion. Any help is most welcome!

Update #1 2/6/24 8:22PM EST: Some hours later after changing nothing more the CORS issues seem to be gone for now. I had previously restarted the app service after the above changes so I really have no clue why it seems to have taken hours to propagate.

Update #2 2/6/24 9:55PM EST: Actually while a lot of them are resolved there are still a couple CORS errors on a few .woff and .tff files on a load of my site I just checked so it looks like its not solved completely. (These fonts don't try to load until I scroll down so I didn't see they were still CORS erroring). They have the same method, origin url, etc. only difference is they are in the themes folder instead of the plugins folder of wp-content - which boggles my mind because CORS isn't that specific that I know of.

Azure Blob Storage
Azure Blob Storage

An Azure service that stores unstructured data in the cloud as blobs.

Azure
Azure

A cloud computing platform and infrastructure for building, deploying and managing applications and services through a worldwide network of Microsoft-managed datacenters.

Azure App Service
Azure App Service

Azure App Service is a service used to create and deploy scalable, mission-critical web apps.

0 comments

3 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. KarishmaTiwari-MSFT 20,857 Reputation points Microsoft Employee Moderator
    2024-02-15T01:51:28.57+00:00

    @Shane H I am sorry that you couldn't get much help from the community or from the support ticket. If you can share the support request ID, I can internally track it and connect with the support team, as needed.

    However, I'm glad that you were able to resolve your issue and thank you for posting your solution so that others experiencing the same thing can easily reference this!

    Since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others ", I'll repost your solution in case you'd like to "Accept" the answer. Accepted answers show up at the top, resulting in improved discoverability for others.

    Issue: Customer is using Azure WordPress with custom domain and Azure Blob storage CDN. On various css/font files and few .woff and .tff files, seeing CORS errors like:
    "Access to font at 'https://<removed for privacy>-endpoint.azureedge.net/blob<removed some for privacy>b5a9b/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-brands-400.ttf' from origin 'https://www.<my custom domain as added in the Wordpress app service custom domain UI in Azure portal>.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

    Solution: Customer shared -
    "Add your custom domain (https qualified with and without www) and the Azure domain assigned to your WordPress app service to the CORS setting in Azure App Service settings. Then in the storage account generated by Azure Wordpress (if you choose to let it setup Azure CDN - a checkbox when first setting up the service) I had to add CORS entries for both my custom domain and the Azure domain that gets auto-generated to the app service. I had allowed all methods and wildcard (*) "Allowed Headers" and "Exposed Headers" and set "Max Age" to 0."

  2. Shane H 0 Reputation points
    2024-02-15T00:58:43.62+00:00

    Eventually what I found to work (which I am pretty surprised Azure Wordpress does not do automatically upon standing up an instance and more surprised both here and an Azure Support ticket that's been open for >1.5 weeks hadn't been able to help on):

    Add your custom domain (https qualified with and without www) and the Azure domain assigned to your Wordpress app service to the CORS setting in Azure App Service settings.

    Then in the storage account generated by Azure Wordpress (if you choose to let it setup Azure CDN - a checkbox when first setting up the service) I had to add CORS entries for both my custom domain and the Azure domain that gets auto-generated to the app service. I had allow all methods and wildcard (*) "Allowed Headers" and "Exposed Headers" and set "Max Age" to 0.

  3. Silvia Wibowo 6,071 Reputation points Microsoft Employee Volunteer Moderator
    2024-02-07T02:27:50.4033333+00:00

    Hi @Shane H , I understand that you previously had CORS error but it's now gone.

    You have set CORS in both App Service and Blob Storage Account configuration and it took a while (several hours) for CORS setting to take effect. I appreciate your update. Thank you.

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.