How to fix Access-Control-Allow-Origin Issue

A resource makes a cross-origin HTTP request when it requests a resource from a different domain than the one which the first resource itself serves.

For example, an HTML page served from http://domain-a.com makes an  <img> src  request for http://domain-b.com/image.jpg. Many pages on the web today load resources like CSS stylesheets, images and scripts from separate domains.

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts.

So here we need to do 3 steps in Apache environment.

  1. Enable headers module: execute this command “sudo a2enmod headers
  2. Verify the module enabled by creating a page with <?php phpinfo(); ?>
  3. Edit .htaccess file and add these lines to allow

<IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin “*”
</IfModule>

In case of mod_headers is not showing in phpinfo() then need to restart apache server.

Enjoy the trick 🙂