coditbetaコードノートPWAアプリをホーム画面に追加した時のリクエストヘッダのオリジンを検証ブラウザからローカルにインストールできるPWAで、ローカルからアクセスした際に、リクエストヘッダのOriginがどうなるのかを検証してみました。結論:インストール元ドメインになるテストしてみた構成ブラウザからアクセスした場合ホーム画面に追加したSPAの場合おまけAPIのCORSの設定をどうするのが良い?Access-Control-Allow-Originは複数設定できない結論:インストール元ドメインになる先に結論を言うと、ホーム画面に追加したPWAアプリのリクエストヘッダのオリジンは、インストールした元のドメインになるようです。ローカルにキャッシュインストールされていても同じです。テストしてみたNode.jsのExpressで構築したAPIサーバーからデータを取得する「ローカルSPAアプリ」へ、スマホのブラウザ、スマホのホーム画面の両方からアクセスしてみて、Originがどうなっているのかを検証してみました。http://192.168.1.102:3000APIへは、Vue.jsのaxiosでコールします。受けるAPI側のコードはこんな感じです。next();});ブラウザからアクセスした場合ローカルネットワーク内に立てたローカルSPAに対して、AndroidスマートフォンのChromeブラウザからアクセスしてみると、http://192.168.1.101:9001と、SPAのアドレスがコンソールに出てきます。続いて、AndroidのChromeブラウザで表示したローカルSPAをそのまま「ホーム画面に追加」で、スマホ本体にインストールして、インストールしたアプリからアクセスしてみます。http://192.168.1.101:9001ブラウザと同じ結果になりました。ローカルからなので、「localhost」とかになるのかと思いきや、きちんとオリジナルサーバーと同じホスト名がリクエストヘッダのOriginにセットされるようです。おまけAPIのCORSの設定をどうするのが良い?SPAアプリの場合、データはAPIサーバーから出すことが多いと思いますが、その際にCORSの問題が発生します。*と入れて対処することはできますが、他のサイトからでもアクセスできてしまうため、データを守るという観点からはなるべく避けたいところです。そこで、本番ドメイン縛りなどにすることになりますが、PWAでホーム画面にインストールした場合は、Origin縛りをして大丈夫かな?と言うのが、本記事を書くきっかけでした。Access-Control-Allow-Originは複数設定できないAccess-Control-Allow-Originにカンマ区切りで複数のドメインを設定すればよい気もしますが、Access-Control-Allow-Originは複数設定ができません。https://bbb.comこういうことができないので要注意です。PWAアプリをホーム画面に追加した時のリクエストヘッダのオリジンがどうなるのかを検証してみました。最初の結論に書きましたが、オリジンはきちんと対処してくれるので、気にせずに開発すれば良いと言うことですね。Access-Control-Allow-Originを動的に変更するAPIの場合は、インストール元を気にしておく必要がありますね。.Hugo.Environmentで取れる。masterブランチ以外で実行されるテストコマンド。