2

ローカルの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

それでも、次のエラーが発生します。クロムコンソールのクロスオリジンリソースシェアリングポリシーにより、クロスオリジンイメージのロードが拒否されました。

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
4

2 に答える 2

6

Wikipedia の CORS の記事とMozilla のドキュメントを読んだ後、CORS の仕組みを誤解していたようです。

実際、オリジンがhttp://localhostmrdoob.github.com でホストされているイメージにアクセスしようとした私のスクリプトです。そのため、ローカル サーバーの構成に を設定Access-Control-Allow-Originしました。"*"しかし、実際には、これで構成する必要があるのは mrdoob.github.com サーバーであり、私のローカル サーバーではありません。

私は mrdoob.github.com サーバー構成にアクセスできないため、この場合、ローカル サーバーとは別のサーバーに保存されているテクスチャをロードするのに CORS は役に立たないようです。

于 2013-01-10T21:49:27.357 に答える
1

Access-Control-Allow-Methodsヘッダーも設定する必要があります。

Header set Access-Control-Allow-Methods "GET, PUT, POST, DELETE"
于 2013-01-08T14:42:08.217 に答える