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

お礼

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

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

原因

Vueのcli-serverやwebサーバーに Access-Control-Allow-Origin を設定すればOK!と思い込んでいた（セキュリティ知識がなかった）のが原因。
画像のサーバーと、Webアプリのサーバー、両方でCORS設定が必要で、どちらも設定がないとCORSエラーになる頑丈な仕様となっています。

今回の対処法

１）　Vue 設定

//vue.config.js
module.exports = {
  configureWebpack: {
    devServer: {
      headers: { "Access-Control-Allow-Origin": "*", }
	}
  }
}

これだけでOKじゃん？って思い込んでいたので大変ハマリました。。。

  ２）　S3設定

両側が必要なのか〜、じゃあこれでOKね！って思ったらダメで再びハマリ。。。あ、CloudFrontも使ってたんだっけ…。

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

３） CloudFront設定

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

後記

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

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

CORSの概要を復習（反省）

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

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

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