If you are working on web development, sometimes you face this problem, for example you want to include/access some files that are not on your current website domain and then you got this error message on your dev console log: CORS header ‘Access-Control-Allow-Origin’ missing
How to solve this problem?
First I want to explain more clearer about my experience so you can picture it out more better if you did not see this problem yet.
I am building a web application on abc.com domain website, but because on my server with that domain I can not store too much big files, I need to store some of files to my other web server with domain xyz.com. Instead of including my file, for example my abc.com/bigfile.file I want to move the file to my second server and rename the link in my website to xyz.com/bigfile.file
After I’ve done above steps, I got this CORS problem. Well, no worries, after searching a lot online, now I can fix it easily.
First, I need to go to my root folder of my website in my second server. I need to edit my .htaccess file (if there is none, I need to create it) then I type this codes in it then save it:
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>That will solve the problem! But, we can do it more specific by allowing CORS only on certain file extensions, for example I want it to be enabled only for .otf and .ttf files only (files with those extensions only). To do this, we need to write this way:
<IfModule mod_headers.c>
<FilesMatch "\.(otf|ttf)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>Hope that solves your problem too! Cheers…