How to fix Access-Control-Allow-Origin (CORS origin) Issue for your HTTPS enabled WordPress Site and MaxCDN

access control allow origin on subdomains

On Crunchify Business site we have enabled HTTPS from day one. Recently WordPress.comannounced 100% HTTPS enablement even for hosted domains at WordPress.com and that’s a great news.

While setting up HTTPS on WordPress site, we found a strange issue by looking at Chromeconsole output. Take a look at below screenshot.

Error: No Access-Control-Allow-Origin header is present on the requested resource.

How to fix Access Control Allow Origin issue for your HTTPS enabled WordPress site

First of all I’ve never seen this before for any WordPress site.

Of course, this is not a new term for us as we do have a detailed tutorial on CORS originfor Java: https://crunchify.com/what-is-cross-origin-resource-sharing-cors-how-to-add-it-to-your-java-jersey-web-server/

Using web.config and Java setting combination you could fix CORS origin issue easily.

Let’s understand what is Cross-origin resource sharing (CORS)?

CORS is industry standard for accessing web resources on different domains. It is very important security concept implemented by web browsers to prevent Javascript or CSS code from making requests against a different origin.

Let’s consider this scenario:

  • You have link from Domain1 which is opened in browser and asking for a JavaScript file from Domain2.
  • Now your web browser makes call to Domain2.
  • If on Domain2, you have a policy to accept request like JavaScript or CSS from only Domain2 and ignore all requests from another domains, then your browser’s Domain1 request will fail with an error.

In simple statement: If request is not coming from same domain or origin, just simply ignore it.

This is very important features which prevents hacking and resource stealing without owners’s knowledge.

Take a look at this below screenshot with error:

Mixed Content: The page was not loaded over HTTPS. This request has been blocked.

Mixed Content CORS origin error for Crunchify.com site

Why problem appeared on Crunchify.com site?

After investigation I came to know that I’ve setup http as my origin URL in MaxCDN setup admin console. It should be https.

Busiess.Crunchify.com and MAXCDN Origin URL issue

How did I fix this error?

Just changed Origin URL from http to https and issue resolved in my case. There is another way to fix an issue too.

Are you using Webfonts from Google, Typekit, etc?

There are multiple ways you could use Webfonts like @font-face or CSS3 methods, some browsers like Firefox & IE may refuse to embed the font when it’s coming from some non-standard 3rd party URL (like your blog) for same security reason.

In order to fix an issue for your WordPress blog, just put below into your .htaccess file.

As you see Access-Control-Allow-Origin "*" allows you to access all resources and webfonts from all domains.

We got excellent question from Andreas on adding Access-Control-Allow-Origin on Subdomains

Access-Control-Allow-Origin on Subdomains

Just add below lines to .htaccess file and we should be good.

Hope this helps you the way you want.

0938.54.84.99