Cross-origin image load denied despite appropriate permission

Question

I'm trying to run the following example http://mrdoob.github.com/three.js/examples/webgl_geometry_cube.html on my local apache and I just replace the following line :

var texture = THREE.ImageUtils.loadTexture('textures/crate.gif');

by

var texture = THREE.ImageUtils.loadTexture('http://mrdoob.github.com/three.js/examples/textures/crate.gif');

I've added the directive allowing cross-domain request in my enabled site configuration, which looks like :

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    ServerName localhost
    DocumentRoot /var/www
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
    <Directory /var/www>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride None
        Order allow,deny
        allow from all
    </Directory>

    ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
    <Directory "/usr/lib/cgi-bin">
        AllowOverride None
        Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
        Order allow,deny
        Allow from all
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log

    # Possible values include: debug, info, notice, warn, error, crit,
    # alert, emerg.
    LogLevel warn

    CustomLog ${APACHE_LOG_DIR}/access.log combined

    Alias /doc/ "/usr/share/doc/"
    <Directory "/usr/share/doc/">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride None
        Order deny,allow
        Deny from all
        Allow from 127.0.0.0/255.0.0.0 ::1/128
    </Directory>

</VirtualHost>

The response header of request confirms that header directive is taken into account :

Accept-Ranges:bytes
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Origin:*
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:725
Content-Type:text/html
Date:Tue, 08 Jan 2013 12:41:32 GMT
ETag:"40ee7-61b-4d2c62fdc4cf4"
Keep-Alive:timeout=5, max=100
Last-Modified:Tue, 08 Jan 2013 12:35:55 GMT
Server:Apache/2.2.22 (Ubuntu)
Vary:Accept-Encoding

Nevertheless I get the following error : Cross-origin image load denied by Cross-Origin Resource Sharing policy on chromium console.

Did I miss something in my apache configuration ? Thanks in advance !

---

Edit : Here are the request and response headers for the document (containing the ThreeJS code) :

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Charset:UTF-8,*;q=0.5
Accept-Encoding:gzip,deflate,sdch
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,de;q=0.2
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost
Referer:http://localhost/tests/
User-Agent:Mozilla/5.0 (X11; Linux i686) AppleWebKit/536.11 (KHTML, like Gecko) Ubuntu/12.04 Chromium/20.0.1132.47 Chrome/20.0.1132.47 Safari/536.11

Response Headersview source
Accept-Ranges:bytes
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods:GET, PUT, POST, DELETE
Access-Control-Allow-Origin:*
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:725
Content-Type:text/html
Date:Thu, 10 Jan 2013 17:52:48 GMT
ETag:"40f8f-61b-4d2f2d858c1d0"
Keep-Alive:timeout=5, max=100
Last-Modified:Thu, 10 Jan 2013 17:52:40 GMT
Server:Apache/2.2.22 (Ubuntu)
Vary:Accept-Encoding

And here the request and response headers for the wanted image on mrdoob.github.com :

Request URL:http://mrdoob.github.com/three.js/examples/textures/crate.gif
Request Method:GET
Status Code:200 OK

Request Headers
Accept:*/*
Accept-Charset:UTF-8,*;q=0.5
Accept-Encoding:gzip,deflate,sdch
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,de;q=0.2
Host:mrdoob.github.com
Origin:http://localhost
Proxy-Connection:keep-alive
Referer:http://localhost/tests/cors_texture_loading.html
User-Agent:Mozilla/5.0 (X11; Linux i686) AppleWebKit/536.11 (KHTML, like Gecko) Ubuntu/12.04 Chromium/20.0.1132.47 Chrome/20.0.1132.47 Safari/536.11

Response Headers
Accept-Ranges:bytes
Cache-Control:max-age=86400
Connection:keep-alive
Content-Length:67585
Content-Type:image/gif
Date:Thu, 10 Jan 2013 17:52:48 GMT
Expires:Fri, 11 Jan 2013 17:52:48 GMT
Last-Modified:Fri, 28 Dec 2012 00:07:28 GMT
Proxy-Connection:keep-alive
Server:GitHub.com
Via:1.1 proxy.thecorporateproxy.fr:2598 (squid/2.7.STABLE9)
X-Cache:MISS from proxy.ign.fr
X-Cache-Lookup:MISS from : proxy.thecorporateproxy.fr:2598

Answer 1

After reading Wikipedia CORS article and Mozilla documentation, it seems that I misunderstood how CORS works.

Actually, my script, whose origin is http://localhost tried to access an image hosted on mrdoob.github.com. So, I set Access-Control-Allow-Origin to "*" for my local server configuration. But actually, it's mrdoob.github.com server which should be configurated whith this, not my local server.

Since I don't have access on mrdoob.github.com server configuration, it's seems that CORS can't help me in this case to load my texture stored on another server than my local one.

Answer 2

You also need to set the Access-Control-Allow-Methods header:

Header set Access-Control-Allow-Methods "GET, PUT, POST, DELETE"