【Angular】「[Error] Blocked 〜 cross-origin request.」のようなエラーが出たときの対処方法

2019年09月11日
投稿者:若林 奨太
カテゴリ:Angular タグ:
Angular

こんにちは。鈴木商店の若林 (@itigoore01) です。

先日Safariで動作確認をしていたら、Safariだけ以下のようなエラーが出てしまい困ったので、対処法をご紹介します。
Safariじゃくても、似たようなエラーが出ている場合は同じ方法で対処できるかもしれません。(原因によりますが)

[Error] Blocked https://*/runtime-es2015.4f263ec725bc7710f1f5.js from asking for credentials because it is a cross-origin request.
[Error] Blocked https://*/main-es2015.6fa442dd5c5a204f47da.js from asking for credentials because it is a cross-origin request.
[Error] Blocked https://*/polyfills-es2015.fd951ae1d7572efa3bc6.js from asking for credentials because it is a cross-origin request.

stack overflowより引用

環境

Safari 12.1.1 (14607.2.6.1.1)
Angular 8.3.3

対処方法

先に対処方法からご紹介します。
なお、この方法が使えるのは@angular/cli@8.2.0以降です。
それ以前のバージョンを使っている場合はバージョンを上げるか、stack overflowの回答にある@angular-builders/custom-webpackを使う方法をお試しください。

で、対処法ですがangular.json を開き、"crossOrigin": "anonymous"の一行を足すだけです。

こんな感じです。

スクリーンショット 2019-09-10 23.46.44

場合によっては"crossOrigin": "use-credentials"にする必要があるかもしれません。 (このIssueのように、Azure App Serviceの認証・認可を使用している場合など)
anonymoususe-credentialsの違いはhttps://developer.mozilla.org/ja/docs/Web/HTML/CORS_settings_attributesが比較的詳しいのでご参考まで。

補足

先程エラー文を引用したstack overflowの回答にもありましたが、原因はSafariでScript moduleで未対応の部分が残っているため、のようです。
なのでSafariのバージョンが上がれば、この対処方法すら必要なくなるかもしれません。

It seems like some changes of the module scripts spec (https://github.com/whatwg/html/pull/3656) has not been yet implemented in Safari. For me it works on Safari Technology Preview.

stack overflowより引用

ただし、この回答にある対処方法は @agular-builders/custom-webpackをインストールして crossorigin属性をscriptタグに差し込むという、やや無理やり&めんどうな方法でした。
もう一つの回答としてはES2015をやめてES5だけターゲットにしろ、というものです。

stack overflowの質問に対する回答がされたときには、またcrossOriginオプションがなかったため仕方ないですが、今はそれよりももっと簡単な対処方法があるので、もし同じ問題にハマったらお試しください。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です