跨域圖像加載否認，儘管相應的權限

Question

我想在我的本地運行Apache下面的例子http://mrdoob.github.com/three.js/examples/webgl_geometry_cube.html，我只是替換下面的行：由

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

我

var texture = THREE.ImageUtils.loadTexture('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 

不過，我得到以下錯誤：鉻控制檯上跨來源資源共享政策否認跨域圖像負載。

我錯過了我的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"