ものづくりのブログ

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

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

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

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