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.
In short: you cannot. As described on MDN; Origin is a 'forbidden' header, meaning that you cannot change it programatically. You would need to configure the web server to allow CORS requests.
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/"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With