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.

`` makes no sense whatsoever. Go read up on the description of that directive in the manual. — CBroe, Jan 18 '17 at 10:56

score 41 · Accepted Answer · answered Jan 19 '17 at 12:41

41

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 Jan 19 '17 at 12:41

neville

474
6
8

2

.htaccess file placed in document root. that would be C:\xampp\htdocs\ – Tomáš Tibenský May 10 '18 at 12:56
You need to enable mod_headers and restart apache as well, in case someone misses it. https://enable-cors.org/server_apache.html – Satys Nov 24 '18 at 11:58
4

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 – djulb Feb 16 '21 at 20:40

score 6 · Answer 2 · answered Apr 30 '20 at 11:10

6

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,

answered Apr 30 '20 at 11:10

Ashadi Sedana Pratama

639
8
11

Important note to avoid frustration: this worked , and you may need to do **hard refresh** – evilReiko Apr 20 '21 at 07:54

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

2 Answers2

Linked