ものづくりのブログ

うちのネコを題材にしたものづくりができたらいいなと思っていろいろ奮闘してます。

トップ > Unity > Unity+WebGLでビルド後ローカルファイルを読み込もうとしたらCORSエラー

Unity+WebGLでビルド後ローカルファイルを読み込もうとしたらCORSエラー

Unity Unity-CORS Unity-エラー対応

Unity を使っていて、WebGL でビルド後にテストプレーしようとしたら見慣れないエラーが出てしまい驚きました。対応したことをここにメモしたいと思います。

現象

[Unity] + [WebGL] でビルド後ローカルファイルを読み込もうとしたら CORE エラーなるものが発生したため対応方法を検討しました。

[chrome]で[index.html]を開いた際以下のようなエラーが表示されました。
f:id:a1026302:20200911171133p:plain
以下エラーメッセージの一部です。

Access to XMLHttpRequest at 'file:///〇〇' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

原因

以下のサイトに気になることが書いてありました。
developer.mozilla.org

CORS リクエストは URL スキームが HTTPS の場合のみ利用できますが、リクエストで指定された URL が異なる種類のものです。これは、ローカルファイルを指定する URL が、 file:/// の URL を使用している場合によく起こります。

この問題を修正するには、単純に CORS に関するリクエストを発行する際に HTTPS の URL を使用するようにしてください。

  • [CORS]について

developer.mozilla.org

解決策

HTML ファイルを 「file://」 というスキームを使ってブラウザで開いている場合、セキュリティの問題でエラーになるとのことで、今回はローカルサーバーを立ち上げ、localhostからアクセスすることで問題を回避しようと思います。

以下のサイトを参考にしました。
qiita.com

[npm]で[http-server]をインストールしたいので、[npm]をインストールします。

~ % brew install npm

Updating Homebrew...

==> Auto-updated Homebrew!

Updated 1 tap (homebrew/core).

==> New Formulae

clang-format@8  diskonaut       ioctl           openfst         terrascan

croc            httpx           libirecovery    ormolu          vtk@8.2

dbdeployer      infracost       libseccomp      snap

==> Updated Formulae

Updated 389 formulae.
==> Downloading https://homebrew.bintray.com/bottles/icu4c-67.1.catalina.bottle.

==> Downloading from https://d29vzk4ow07wi7.cloudfront.net/2d1e91b5127f66e794179

==> Downloading https://homebrew.bintray.com/bottles/node-14.10.1.catalina.bottl

==> Installing dependencies for node: icu4c

==> Installing node dependency: icu4c

==> Pouring icu4c-67.1.catalina.bottle.tar.gz

==> Caveats

icu4c is keg-only, which means it was not symlinked into /usr/local,

because macOS provides libicucore.dylib (but nothing else).
If you need to have icu4c first in your PATH run:

  echo 'export PATH="/usr/local/opt/icu4c/bin:$PATH"' >> ~/.zshrc

  echo 'export PATH="/usr/local/opt/icu4c/sbin:$PATH"' >> ~/.zshrc
For compilers to find icu4c you may need to set:

  export LDFLAGS="-L/usr/local/opt/icu4c/lib"

  export CPPFLAGS="-I/usr/local/opt/icu4c/include"
==> Summary

🍺  /usr/local/Cellar/icu4c/67.1: 258 files, 71.2MB

==> Installing node

==> Pouring node-14.10.1.catalina.bottle.tar.gz

==> Caveats

Bash completion has been installed to:

  /usr/local/etc/bash_completion.d

==> Summary

🍺  /usr/local/Cellar/node/14.10.1: 4,698 files, 62MB

==> Caveats

==> icu4c

icu4c is keg-only, which means it was not symlinked into /usr/local,

because macOS provides libicucore.dylib (but nothing else).
If you need to have icu4c first in your PATH run:

  echo 'export PATH="/usr/local/opt/icu4c/bin:$PATH"' >> ~/.zshrc

  echo 'export PATH="/usr/local/opt/icu4c/sbin:$PATH"' >> ~/.zshrc
For compilers to find icu4c you may need to set:

  export LDFLAGS="-L/usr/local/opt/icu4c/lib"

  export CPPFLAGS="-I/usr/local/opt/icu4c/include"
==> node

Bash completion has been installed to:

  /usr/local/etc/bash_completion.d

[npm]で[http-server]をインストールします。

% npm install -g http-server

/usr/local/bin/http-server -> /usr/local/lib/node_modules/http-server/bin/http-server

/usr/local/bin/hs -> /usr/local/lib/node_modules/http-server/bin/http-server



    

  1. http-server@0.12.3
    2. 

added 23 packages from 35 contributors in 3.657s

[http-server]を立ち上げてみます。
※対象ファイルがあるディレクトリでコマンド実行します。

~ % http-server

Starting up http-server, serving ./public

Available on:

  http://127.0.0.1:8080

  http://192.xxx.xxx.xxx:8080

Hit CTRL-C to stop the server

対応後

[chrome]からhttp://localhost:8080でアクセスするとエラーが解消されタイトルが表示されました。
f:id:a1026302:20200911175314p:plain