尽管获得了适当的许可，但仍拒绝跨域图像加载

Question

我正在尝试在我的本地 apache 上运行以下示例 http://mrdoob.github.com/three.js/examples/webgl_geometry_cube.html，我只是替换以下行：

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

通过

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

我在启用的站点配置中添加了允许跨域请求的指令，如下所示：

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

请求的响应标头确认已考虑标头指令：

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

尽管如此，我收到以下错误：Chromium 控制台上的跨域资源共享策略拒绝了跨域图像加载。

我是否错过了我的 apache 配置中的某些内容？ 提前致谢！

---

编辑： 以下是文档的请求和响应标头（包含 ThreeJS 代码）：

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

这里是 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

看了Wikipedia CORS article和Mozilla documentation后，似乎误解了CORS的工作原理。

实际上，我的脚本（其来源为 http://localhost）试图访问托管在 mrdoob.github.com 上的图像。因此，我将 Access-Control-Allow-Origin 设置为 "*" 用于我的本地服务器配置。但实际上，应该配置的是 mrdoob.github.com 服务器，而不是我的本地服务器。

由于我无权访问 mrdoob.github.com 服务器配置，因此在这种情况下，CORS 似乎无法帮助我加载存储在本地服务器之外的另一台服务器上的纹理。

Answer 2

您还需要设置Access-Control-Allow-Methods 标头：

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