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-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: 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
Domain1which is opened in browser and asking for a JavaScript file fromDomain2. - 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 other 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 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.
We got excellent question from Andreas on adding Access-Control-Allow-Origin on Subdomains
Just add below lines to .htaccess file and we should be good.
<ifmodule mod_headers.c="">
SetEnvIf Origin "^(.*\.domain\.com)$" ORIGIN_SUB_DOMAIN=$1
Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
Header set Access-Control-Allow-Methods: "*"
Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization"
</ifmodule>
Hope this helps you the way you want.