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

然而，我在Chrome控制台上收到以下错误：跨源资源共享策略拒绝跨源图像加载。

我的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"

尽管有适当的许可，但跨域图像加载被拒绝

2 个答案: