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

On Crunchify Business site we have enabled HTTPS from day one. Recently WordPress.com announced 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 Chrome console output. Take a look at below screenshot.

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

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 origin for Java: http://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.

Why problem appeared on business.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.

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.

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

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