How to get rid of this error alert: CORS header ‘Access-Control-Allow-Origin’ missing



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…

loading...

Leave a Reply

Your email address will not be published.