Bài viết này thực hiện (hoặc lụm bài về đăng câu like từ các trang khác) bởi Việt Lâm Coder một YOUTUBER có tâm và đẹp trai siêu cấp vô địch zũ trụ.
Mục lục
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 Chromeconsole 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: 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 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 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 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.
Bài viết này thực hiện (hoặc lụm bài về đăng câu like từ các trang khác) bởi Việt Lâm Coder một YOUTUBER có tâm và đẹp trai siêu cấp vô địch zũ trụ.