概要
前回はAzure Blob Storageに画像のアップロードを行った。
アップロードした画像を使いたいが、Azure Blob Storageの静的ホスティングで公開すると、Azure Static Web Appsとドメインが別になる。
同一オリジンポリシーにより、JSでのfetchができなかったり、キャンバスの汚染の問題があるため、これを解決したい。
Blob Storageの静的ホスティングはCORSをサポートしていないため、AWSでいうCloudFrontにあたるAzure CDNを使って解決することとする。
静的ホスティング
有効にすると、$webというコンテナが作成される。
ソースもコンテナに対応するように修正し、アップロードを試してみる。
export const useImageUploaderPageHooks = () => {
- const containerName = `images`;
+ const containerName = `$web`;
アップロードはうまく行った。
アクセスできないことの確認
次に、コードからアップロードしたファイルをダウンロードしようとしてみる。
const res = await fetch('https://hoge.z11.web.core.windows.net/fuga.png', {
mode: 'cors',
});
上記のコードだと、下記のエラーとなる。同一オリジンポリシー違反のため。
Access to fetch at 'https://hoge.z11.web.core.windows.net/fuga.png' from origin 'https://piyo.5.azurestaticapps.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
CDNの作成
下記のようにストレージアカウントの「セキュリティとネットワーク > Front Door と CDN」を選択。作成する。元のホスト名は静的Webサイトを選択。
なお、推奨されているAzure Front DoorとCDNを比較したが、Front Doorは機能が豊富でWAFが標準でついてくる代わりに価格が5000円～。お試しに払うには高いので今回はCDNを使う。
↑ 月20円 (1G/月) ↓月5000円(1G/月)
CDNの設定
作成したエンドポイントの「設定 ＞ ルールエンジン」を選択。
「規則の追加」を押し、設定を追加する。
| 規則名 | wsa |
|---|
条件:要求ヘッダー
| ヘッダー名 | 演算子 | ヘッダー値 | 大文字と小文字の変換 |
|---|---|---|---|
| Origin | 次の値に等しい | https://piyo.5.azurestaticapps.net | 変換なし |
アクション:要求ヘッダーの変更
| アクション | HTTPヘッダー名 | HTTPヘッダーの値 |
|---|---|---|
| 追加 | cross-origin-resource-policy | cross-origin |
| 追加 | Access-Control-Allow-Origin | https://piyo.5.azurestaticapps.net |
動作確認
CDN経由のＵＲＬに書き換える
- const res = await fetch('https://hoge.z11.web.core.windows.net/fuga.png', {
+ const res = await fetch('https://moga.azureedge.net/fuga.png', {
mode: 'cors',
});
ここまでの設定をしたら、クロスオリジンでのＣＯＲＳ対応が完了し、画像がfetchできることを確認した。
参考
Azure Storage + Azure CDN でCORP対策を行う
追記：キャッシュを何とかしたい
画像を更新しても反映されないので、キャッシュを削除したくなりました。
CORS対応のアクセス（リクエストにOriginが含まれている）ではキャッシュが効かないようにする。
CDNファイルのキャッシュを無効にする
CDNはキャッシュのバイパスを設定する。
フロントエンド側で画像読み込み時にOriginリクエストをする
imgタグからの取得でもoriginの要求ヘッダが入るように、crossOrigin属性を追加する。*
- <img src={src} height={100} />
+ <img src={src} height={100} crossOrigin="anonymous" />
aタグでのダウンロードはOriginがつかないので置き換える
- <a href={`${zipUrl}`}>
<Button
icon="download"
style={{ marginLeft: '5px' }}
+ onClick={async () => {
+ const res = await fetch(`${zipUrl}`, { mode: 'cors' });
+ const blob = await res.blob();
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `${data.name}.zip`;
+ a.click();
+ }}
>
ユドナリウム用ZipDL
</Button>
- </a>