S3 + CloudFront + canvas のCORS問題

そんちゃー君

2024年2月18日 11:55

開発中のツール制作で画像管理を S3+CloundFront に移行したら、編集する画像の読み込みがCORSエラー。
危うく週末を失いかけたので書いておきたいと思います。

お礼

大変ドハマリしたので、参考にした記事を書いた方々にお礼を申し上げたいです。ありがとうございます！

＊参考にした記事を読めば完璧なので以下はぼくの備忘録。

原因

S3, CloundFront両方でCORS設定が必要で、どちらも設定がないとだめっぽい。

今回の対処法

1）　S3設定

これでOKね！って思ったらダメで再びハマリ。。。あ、CloudFrontも使ってたんだっけ…。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "mydomain.com"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

2） CloudFront設定

レスポンスヘッダーポリシーを編集します。

後記

最初英語で調べていて、Vueの解決策は記事が多くて「はいはい、なるほどです！」って感じでしたが、最終的に助けていただいた記事はどれも日本語の記事で、　書き方も親切だし、「ありがたや〜〜〜〜〜〜〜」ってなりました。重ねて御礼申し上げます。

（↓これで直ると思ったんですけどね…)

CORSの概要を復習（反省）

基礎力が無いってこういうことですよね、レガシーゲームプログラマーの悲しさよ。。。

ただですね、場当たり的に増築されてきた歴史もあるのでしょうが、文章がわかりにくいんです。箇条書きでバシっと書いてほしいの。
読んでみると、「すべてのブラウザーが下記のようなプリフライトリクエストのリダイレクトに対応しているわけではありません。」みたいなことが多すぎて、そもそも仕様じゃなくて「現実」なことが明快に書きづらくさせているのでしょう。

理解するには実際に要件項目ごとに確認するサンプルをサーバー・クライアントに作成して実行する必要がありそうです。実際にやっておられる方の記事がありました。感謝感謝です。

いいなと思ったら応援しよう！

サポートありがとうございます😊 ベトナムにお越しの際はお声がけくださいね🌻