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

Question

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.

Adlay

<IfModule C:\xampp\htdocs\someDIrectory\1.jpg> makes no sense whatsoever. Go read up on the description of that directive in the manual. – Noelnoelani

Answer 1

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/"

Marginalia

.htaccess file placed in document root. that would be C:\xampp\htdocs\ – Fishbein

You need to enable mod_headers and restart apache as well, in case someone misses it. enable-cors.org/server_apache.html – Madalene

In my case i needed to add two directives in file xampp\apache\conf\httpd.conf Header Set Access-Control-Allow-Origin * Header Set Access-Control-Allow-Headers * than it started working - Cheers – Torch

Answer 2

You need to create the .htaccess file first and put it on your root document of application and then set it at the beginning of the file

Header set Access-Control-Allow-Origin *

Cheers,

Kisumu

Important note to avoid frustration: this worked , and you may need to do hard refresh – Annabel