While setting up HTTPS on WordPress site, we found a strange issue by looking at Chrome console output. Take a look at below screenshot.
Access-Control-Allow-Originheader 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
Let’s consider this scenario:
- You have link from
- Now your web browser makes call to Domain2.
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 Crunchify.com site?
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
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.
Header set Access-Control-Allow-Origin "*"
As you see
Access-Control-Allow-Origin "*" allows you to access all resources and webfonts from all domains.