Cross-origin issue loading images for skybox

Question

This is driving me nuts. I am trying to get a skybox working with images I got from the internet. My code:

As global variables:

var path = "file:///C:/Users/Tyler/Desktop/ComS_336_workspace/";
    var imageNames = [
                      path + "meadow_bk.jpg",
                      path + "meadow_ft.jpg",
                      path + "meadow_up.jpg",
                      path + "meadow_dn.jpg",
                      path + "meadow_rt.jpg",
                      path + "meadow_lf.jpg"
                      ];

In the main function:

   // load the six images
      //THREE.ImageUtils.crossOrigin = "Anonymous";
      var ourCubeMap = THREE.ImageUtils.loadTextureCube(imageNames);

But get this error:

DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/Users/Tyler/Desktop/ComS_336_workspace/meadow_ft.jpg may not be loaded.

And when I add the THREE.ImageUtils.crossOrigin = "Anonymous"; I get this error:

Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access.

I saw some posts saying to run chrome with --allow-files-access-from-files or whatever, but don't want to risk any security issues. Then I saw others say to put images on webserver? This I had absolutely no idea how to do and why must this be that complicated??

My html and js files are in the same folder (ComS_336_workspace) as my images.

I am just really needing help on what to do and if I must do a webserver, how do I put my images on them and set the path to my images? That I don't get.

Answer 1

To solve this problem you need either save remote files to your site or use some proxy script from your site (PHP in example) to get images through your site.

Anyway you need a fully qualified domain name to get rid of CORS-compliant errors. Loading webgl and images from file:/// will not work.

Answer 2

What are you using to edit your code? If you are trying to run the page from your desktop for testing purposes then I would recommend brackets.io.

Its great, free, and will get you around the CORS issue as you build your code up.