[FIXED] How to enable 'Access-Control-Allow-Origin' header for all files in a directory of XAMPP?

Issue

I am developing a HTML5 Javascript app to get an image from my local server which runs on the same machine as the app. When I run the app on my Chrome, I got:

Access to Image at 'http://localhost/someDIrectory/1.jpg' from origin 'http://localhost:50000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:50000' is therefore not allowed access.

From many questions here, the answers point out that I need to set

header("Access-Control-Allow-Origin: *");

in php file and it should work, but that is for php files... What about an image or a directory with images?

I have also came across How do I enable cross-origin resource sharing on XAMPP? and tried to add

<IfModule C:\xampp\htdocs\someDIrectory\1.jpg>
    Header set Access-Control-Allow-Origin: *
</IfModule>

into httpd.conf. I tried restart XAMPP and retried the above. But the result I got is still the same.

How to correctly set up such setting for XAMPP?

Note: I am using Construct 2 which is basically exported out as an HTML5/Javascript. I am simply using Sprite Load From URL action.

Solution

Create a file called ".htaccess" in the directory of your files and add the following to the file.

Header set Access-Control-Allow-Origin "http://localhost:50000/"

Answered By - neville

Answer Checked By - Clifford M. (PHPFixing Volunteer)